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

Question

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

我不允许使用百分比。我尝试过使用它们，但是只要它们之间有其他元素，第二个 block 就会下降。

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

这是我的 Fiddle

Answer 1

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

Fiddle

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