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

Question

我在自然地扩展 div 时遇到问题，如下所示：

我不允许使用百分比。我曾尝试使用它们，但是一旦它们之间有其他物品，第二块就会掉下来。

HTML 代码：

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

这是我的小提琴

Answer 1

替换float:left为overflow:hiddenin .block2。

小提琴

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