CSS - HTML - 2个浮点列

Question

我遇到了问题。

我的代码现在：

<div style="width: 500px; margin: auto; border: 1px solid black;">
   <div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
   <div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
   <div style="clear: both;"></div>
</div>

现在看起来像这样：

当第二个div中的单词与第一个div之后的单词一样短时，它就在一行中，如下所示：

当decond div更长时，我的目标是获得此设计。我不允许使用WIDTH和FLOAT: RIGHT因为内部div必须动态！

喜欢这个（PhotoShop）：

提前感谢您的帮助！

Answer 1

这就是你要找的东西

我从第二个内部div中移除了浮动：左边并增加了边距。

<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A     A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A       </div>
<div style="clear: both;"></div></div>

希望这有帮助

Answer 2

不允许宽度？好的，这是一个尝试：

AFAIK你不能在没有几个宽度属性的情况下使用float。与“列”的相对定位相同：您仍然需要在第二列上留下宽度和边距。

解决方案是使用CSS display: table;和 table-cell （不是，而不是HTML表格;））。它就像你想要的那样灵活。
http://dabblet.com/gist/1717860 会向您展示一个示例（HTML与CSS分开，为了清晰起见添加了ID，但实际上并不需要，不推荐使用已弃用的元素，并删除了强大的b。但CSS font-weight: bold;会更好，没有上下文）

#main {
  display: table;
  width: 500px;
  margin: auto;
  border: 1px solid blue;
}

#main > div {
  display: table-cell;
  border: 1px dashed black;
  padding: 1em;
}


#main > div + div {
  padding-left: 20px;
}

编辑：兼容性 IE8 +
display: inline-block;是IE6 / 7的良好后备。好显示：内联; zoom：1;实际上，由于IE6 / 7不能理解内联块值，但可以实现与内联+ hasLayout相同的效果）

Answer 3

<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;width:50px;"><b><u>TEST</u></b></div>
<div style="float: left; margin-left: 20px; border: 1px solid black;width:420px;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div style="clear: both;"></div>
</div>

这接近你想要的。我只是设置内部div的宽度。此外，您忘记关闭第一个div标签。

Answer 4

将第一个框浮动并给它一个固定宽度。然后给右边的div一个比左边div宽度更大的边距！ ......并且不要浮动第二个div

Answer 5

尝试：

<div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;">
   <div style="float: left; margin-right: 20px; border: 1px solid black;">
     <b><u>TEST</u></b>
   </div>
   <div style="overflow: hidden;">
     <div style="float: left; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
   </div>
</div>

http://jsfiddle.net/ZmRY2/5/

Answer 6

就像一个表格单元格，试试这个

<div style="width: 500px; margin: auto; border: 1px solid black;">  
    <div style="float: left;">
        <div style="border: 1px solid black;"><b><u>TEST</u></b></div>
    </div>  

    <div style="display:table-cell;">
        <div style="margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A  </div>
    </div>

    <br style="clear: both;">
</div>