html - 基于ul li元素扩展div高度？

Question

愿你平安幸福:)

假设我有:

<div class="c1">
   <div class="c2">
      <ul>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
         <li><div class="c3"></div></li>
      </ul>
   </div>
</div>

所以基本上我希望 div c1 和 c2 根据 li 内容展开。

我创建了这个 Jsfiddle:https://jsfiddle.net/unpfk1aw/在 c1 中扩展，但 c2 保持不变。如果您能告诉我原因是什么，我将不胜感激。

Answer 1

因为您正在使用 float: left;。这将元素从文档流中取出，意味着 c2 div 不知道每个 li 的高度。

相反，在您的 ul li 选择器中将 float: left; 替换为 display: inline-block;。