css - Div 不随内容扩展

Question

我知道有几篇关于此的帖子，但没有一个解决方案适合我。话虽如此，我包含的 div 不会随着我的内容而增长。我知道为什么会这样，因为它是“ float ”的，但即使我使用“清除”，它也不会随着父 div 展开。我尝试在下面的几乎每个元素中使用 using clear 但没有成功。任何帮助将不胜感激。

查看问题图片:

有关实例，请访问 http://thehopcompany.com/index.php?id=49

----------------CSS----------------

 .product {
   width:775px;
   margin:0;    
   padding:0;
   margin-top:75px;
   margin-left:-8px;

 }
 .product ol{
   margin:0px;
 }
 .product li{
   list-style:none;
   margin: 0 0 15px 0;
   padding:15px;    
   border:1px solid #ccc;
   height:100px;
   color:#000;
 }
 .product-column-left{
   float:left;
   width:100px;
   height:100px;
 }
 .product-column-right{
   float:left;
   width:120px;
   border-left:1px solid #ccc;
   height:100px;
   text-align:center;
 }
 .product-column-center{
   float:left;
   width:470px;
   min-height:100px;
   padding-right:15px;
   padding-left:15px;
   text-align:left;
   padding-bottom:30px;
       display:block;

 }
 .product h2{
   font-size:18px;  
   margin-bottom:5px;
   margin-top:0;
 }
 .product .text-underline{
   text-decoration:underline;   
 }
 .description-text{
   font-size:12px;
   color: #000;

 }
 .clear{
   clear:both;  
 }

------------------------HTML-------------------- ------

        <li style="list-style:none;">

        <div style="width:750px;" >

             <div class="product-column-left">

                <img align="left" style="border:0;"  src="images/hop-pellets.png" width="100" height="100" />

             </div>

          <div class="product-column-center"  >

                <h2><span class="hop-title-text-product">Columbus, Tomahawk and Zeus</span></h2>

                <div class="description-text" >Proprietary naming rights sometimes have identical or nearly identical strains being sold under multiple names. Columbus, Tomahawk and Zeus, or the CTZ hops, are the most famous example of this phenomenon. CTZ hops are known as super-alpha hops due to the extremely high percentage of alpha acids they contain, making them ideal bittering additions. Columbus hops can be found alongside Centennial hops in Stone Ruination IPA or in Saranac's Brown Ale.

专有命名权有时会以多个名称出售相同或几乎相同的菌株。 Columbus、Tomahawk 和 Zeus，或 CTZ 啤酒花，是这种现象最著名的例子。 CTZ 啤酒花被称为超阿尔法啤酒花，因为它们含有极高比例的阿尔法酸，使其成为理想的苦味添加剂。在 Stone Ruination IPA 或 Saranac's Brown Ale 中，可以找到哥伦布啤酒花和 Centennial 啤酒花。

             </div>

             <div class="product-column-right">

                <h2>$0.00</h2>



                <a href="index.php?cart=1&pid=49"><img style="margin-top:10px; border:0;" type="image"src="images/add-to-cart-button.png" width="90" height="25"   /></a>

             </div>

        </div>

    </li>

    </ol>

    </div>

Answer 1

尝试给父级添加溢出隐藏li

.product li { 
    .... 
    overflow: hidden;

    /*height: 100px;*/
  }

overflow:hidden 的问题在于，如果布局中有溢出元素，它会隐藏这些元素。因此，通过使用 clearfix，我认为这是您可以实现的最佳实践，如下所示。

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

然后，基本上您只需要将类添加到您的 container 元素中。 More about Clearfix

<li class="clearfix">
    <div style="float: left;">        
        <div class="content">Big content</div>    
    </div>
</li>

FIDDLE DEMO