Question

我遇到问题，让我的HTML格式化我需要它的方式。

我正在动态创建div（父级）。在每个div中有两个div（div one和amp）。

Div one是可以是任意长度或可变长度的文本。 Div 2包含一个图像。

无论父div的大小如何，文本都需要尽可能多地填充宽度。但我需要第二个div与图像，浮在文本的最后一行。我还需要所有图像div，以垂直排列。

这个父div可以重新调整大小，可以得到更小的更大但浮动图像必须始终位于句子行但位于容器的右侧。

如果文本宽于div父级，则图像需要在与文本相同的行上与父容器的右侧浮动。如果文本小于父级，则图像必须仍位于父级div的右侧。

将其视为浮动图像的完整停止，如果这有意义的话。每个句子都在一条长垂直线上完全停止。

我已尝试过div和table但结果却出现乱码。

这是我目前的代码：

  <div>
    <div style="display: inline; float: left;">
        Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>
<div>
    <div style="display: inline; float: left;">
        Next line of Text Goes here</div>
    <div style="display: inline; float: right; z-index: 1000;">
        <img src="info.png" /></div>
</div>

由于

Answer 1

我认为想象一下你想要获得什么结果有点困难。你能画出一张图表来说明你想要的结果吗？

我可以告诉你，你正在寻找这个（在JSFiddle上查看结果）：http://jsfiddle.net/kcschaefer/GYQea/9/

代码是：

<div id="parent" style="width: 100%;">
<div>
        First text goes here
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
    <div style="clear: both;"></div>

<div>
        Next line of  really long text that demonstrates how the float will work would go  right here, and you can see that the info thingie goes all the way to  the end of the div, no matter how long this is.
         <img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />

<div>
</div><!-- end parent -->

浮动div与图像和可变长度文本

1 个答案: