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>

希望这可以帮助