CSS - HTML - 2 个 float 列

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 中删除了 float:left 并增加了边距。

<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>

希望对你有帮助