将div宽度自然地扩展到另一端的问题

Question

我有问题像这样自然地扩展div：

我不允许使用百分比。我试图使用它们，但是一旦其他项目进入它们之间，第二个块就会崩溃。

HTML code：

 <div class="block1">
     <ul>
         <li>item long</li>
         <li>item small</li>
         <li>item sample</li>
     </ul>
 </div>

 <div class="block2">
     <a>This is a nice sample text</a>
 </div>

CSS代码：

 .block2{
     float:left;
     border:1px solid blue;
 }
 .block1{
     float:left;
     border:1px solid red;
 }

这是我的Fiddle

Answer 1

将float:left替换为overflow:hidden中的.block2。

Fiddle

overflow:hidden是触发块格式化布局的一个小技巧，因此.block2 div位于浮动div的一侧。您可以在this YUI article中阅读有关块格式化上下文的更多信息。