0

我知道有几篇关于此的帖子，但没有一个解决方案对我有用。话虽如此，我的包含 div 不会随着我的内容而增长。我知道为什么会发生这种情况，因为它是“浮动”的，但即使我使用“清除”，它也不会随着父 div 扩展。我尝试在下面的几乎每个元素中使用 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.

专有命名权有时会以多个名称出售相同或几乎相同的菌株。哥伦布、战斧和宙斯，或 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>
4

5 回答 5

4

尝试将溢出隐藏添加到父级li

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

    /*height: 100px;*/
  }

问题overflow:hidden是如果你的布局中有溢出的元素，它会隐藏它们。因此，通过使用clearfixwhich is 我想你可以像下面这样实现它的最佳实践。

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

然后，基本上你只需要在你的container元素中添加类。更多关于 Clearfix 

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

小提琴演示

于 2012-05-30T13:25:45.807 回答
1 
.clear{width: 100%; clear: both; height: 0px; line-height:0px;}

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

在容器 div 的最后（我认为在 product-column-right 之后）和结束 li 标签之前添加上面的 div。这应该确保 div 跨越内容。

于 2012-05-30T13:25:37.423 回答
1

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

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

<div class='clear'></div>
于 2014-02-21T18:36:37.590 回答
0

您的 product.li 样式的高度为 100px，因此无论如何这都会约束盒子。删除该设置（或将其更改为 height:auto），然后在结束 li 标记之前添加一个空的清除 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>
于 2012-05-30T13:28:00.937 回答
0

我使用了 overflow: 有一段时间取得了很大的成功 - 但我遇到了一些问题，并决定回到这个明确的修复程序。如果您有任何问题 - 请检查一下。

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

于 2012-08-06T17:24:49.927 回答