Question

我知道有几篇关于此的帖子，但没有一个解决方案适合我。话虽如此，我的内容不会随着我的内容而增长。我知道为什么会发生这种情况，因为它是'浮动'，但即使我使用'clear'它也不会随着父div而扩展。我尝试过在几乎所有元素中使用clear都没有成功。任何帮助将不胜感激。

查看问题图片：

enter image description here

如需实时示例，请访问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.

专有命名权有时会以多个名称出售相同或几乎相同的菌株。哥伦布，战斧和宙斯，或CTZ啤酒花，是这种现象最着名的例子。 CTZ啤酒花被称为超级α啤酒花，因为它们含有极高比例的α酸，使其成为理想的苦味添加剂。哥伦布啤酒花可以在Stone Ruination IPA或Saranac的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

Answer 2

.clear{width: 100%; clear: both; height: 0px; line-height:0px;}

<div class='clear'></div>

在容器div的最后添加上面的div（我认为在产品列右侧之后）并且在结束li标签之前添加。这应该确保div跨越内容。

Answer 3

添加clearfix可以解决您的问题：

.clear{width: 100%; clear: both; height: 0px; line-height:0px;}

<div class='clear'></div>

Answer 4

你的product.li风格的高度为100px，因此无论如何都会限制盒子。删除该设置（或将其更改为height：auto），然后在结束li标签之前添加一个空的clear div，你应该没问题。

因此您的CSS定义将更改为：

 .product li{
   list-style:none;
   margin: 0 0 15px 0;
   padding:15px;    
   border:1px solid #ccc;
   height:auto;
   color:#000;
 }

然后是相关的HTML：

            <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>
    <div style="clear:both"></div>
</li>

</ol>

</div>

Answer 5

我正在使用溢出：一段时间取得了很大的成功 - 但我遇到了一些问题并决定回到这个明确的解决方案。如果您有任何问题 - 请查看。

http://css-tricks.com/snippets/css/clear-fix/

Div不随内容扩展

5 个答案: