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's Brown Ale のセンテニアル ホップと並んで見つけることができます。

             </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 を使用することで、以下のように達成できるベストプラクティスだと思います。

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

container次に、基本的に、要素にクラスを追加するだけです。クリアフィックスの詳細 

<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 をコンテナ div の最後 (product-column-right の後だと思います) と終了 li タグの直前に追加します。これにより、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 タグの直前に空の 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>
于 2012-05-30T13:28:00.937 に答える
0

私はoverflowを使用していました：しばらくの間、多くの成功を収めましたが、いくつかの問題があり、この明確な修正に戻ることにしました。問題がある場合は、チェックしてください。

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

于 2012-08-06T17:24:49.927 に答える