css - 强制 div 在 float 图像之外的其他 div 下

Question

我有以下情况:一张图片向左浮动。我无法强制将一个 div(id="keywords")(包含一个列表)置于前一个 div(id="categories")(也包含一个列表)之下，但不会破坏图像的 float (这是如果我在 latdiv 之前执行 clear:left 会发生什么情况)并且如果前一个 div 中的列表很大，应该会滑到图像下方。这是我的 html 代码:

<div id="container">
    <img src="image-source" alt="Image" id="image-id">    
    <div id="media_type">
        <h2>
            Title
        </h2>                                               
    </div>  
    <p>
        <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs">       
        <b>Categories</b> 
        <ul>
            <li>
                category1
            </li>                               
            <li>
                category2
            </li>                                               
        </ul>
    </div>
    <!-- should go below image if first list is large enough -->
    <div id="keywords">                         
        <b>Keywords</b>
        <ul>    
            <li>
                keyword1
            </li>                               
            <li>
                keyword2
            </li>       
        </ul>                                   
    </div>          
    <div class="clear"></div>
    <div id="will-go-bellow-image"></div>
</div>

和CSS:

#container #image-id {
    float: left;
    height: 220px;
    margin: 0 10px 10px 0;
    width: 220px;
}
#categs > ul > li, #keywords > ul > li {
    float: left;
    margin-top: 10px;
}

#categs > ul, #keywords > ul {
    list-style: none outside none;
}

谢谢，阿德里安

Answer 1

为了防止内容环绕 float 元素，您可以环绕包含 #media_type 的内容, #categs和 #keywords由包装器划分<div>并申请 overflow 该元素的属性如下:

<div class="wrapper">
    <div id="media_type"> ... </div>  
    <p>
      <a href="some-url" target="_blank">Feed</a>
    </p>        
    <div id="categs"> ... </div>
    <div id="keywords"> ... </div>          
</div>

.wrapper {
  overflow-x: auto; /* or overflow-x: hidden; */
}

WORKING DEMO .

你也可以使用 overflow属性而不是 overflow-x以获得更好的浏览器支持。

---

根据您的评论:

if the category list is large enough, I would like the #keywords list to slip below the image.

我应该注意到，由于您正在 float 所有列表项，因此您应该清除 <ul> 末尾的 float 。列出元素，以使父元素与其 float 的子元素一样高。

这可以简单地通过使用 overflow 来实现。父元素的属性:

Example Here .

#categs > ul,
#keywords > ul {
  list-style: none;
  overflow: hidden; /* This will create a new block formatting context     */
  /* https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context */
}

这将推送 #keywords元素换行。

您可能还想考虑来自 @MrAlien 的这个很好的答案:

• > What does the CSS rule clear: both do?