1

我有多个浮动块。是否可以指定应该清除哪个块？

检查以下结构：

+------------+ +--------------------+
|            | |+--------+ +-------+|
| float:left | ||fl left | |fl left|| 
|            | |+--------+ +-------+|
|            | |+------------------+|
|            | ||                  ||
|            | || block that clears||
|            | || prev 2  floated  ||
|            | || blocks but doesn't|  
|            | || clear first fl.  ||
|            | || block            ||
|            | |+------------------+|
|            | +--------------------+
+------------+

在 html 中：

<div class="floated-left-column">
   left column content
</div>
<div class="right-column">
   <div>
       <div class="float-left">...</div>
       <div class="float-left">...</div>
   </div>
   <div>
        This block should clear only ".float-left" blocks (not ".floated-left-column")
   </div>
   <div>
        Here is some content
   </div>
</div>
4

4 回答 4

0

这是基本的 HTML/CSS 布局。看看这个 JSFiddle 示例。

当你清除一个浮动时，它通常只会清除同一容器内的浮动，或者更低。这就是为什么当您将某些东西clear: both放入容器的顶层时，它会清除所有内容。

于 2012-07-02T16:13:45.350 回答
0

您还需要在右侧“左侧”浮动父块。您可以在子容器中浮动和清除，而父容器不会清除。

我看到你现在添加了一个例子。向左浮动 DIV“右列”

于 2012-07-02T16:07:19.367 回答
0

我已经用以下html解决了它。谢谢您的帮助。可以解决我的问题吗（它有效，但我不知道它在其他浏览器等中有效）？

<div class="floated-left-column">
   left column content
</div>
<div class="right-column">
   <div class="floated-left-with-100-precent-width">
       <div>
           <div class="float-left">...</div>
           <div class="float-left">...</div>
       </div>
       <div class="clearfix"></div>
   </div>

   <div>
        This block should clear only ".float-left" blocks (not ".floated-left-column")
   </div>
   <div>
        Here is some content
   </div>
</div>
于 2012-07-02T16:44:09.743 回答
-1

使用bootstrap可能很容易做到这一点。如果您正在从头开始设计一个新网站，那么 bootstrap 无论如何都是一个很好的起点。

于 2012-07-02T16:06:41.907 回答