0

だから私はこの種の構造を持っています：

<!-- Mind Wrap  -->
<div class="mid-wrap">

<!-- Content Wrap  -->
<div class="content-wrap">
    <div class="left-sidebar"></div>
    <div class="main-article"> </div>
    <div class="clear"></div>
</div>

<!-- Right siebar -->
<div class="right-sidebar"></div>
<div class="clear"></div>

</div>

私のCssは次のとおりです。

    .mid-wrap {
    width:700px;
    height:auto;
    }

    .content-wrap {
    width:500px;
    float:left;
    position:relative;
    height:auto;
    }

    .right-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .left-sidebar {
    width:150px;
    float:left;
    position:relative;
    height:auto;
    }

    .main-article {
    width:300px;
    float:left;
    position:relative;
    height:auto;
    }
.clear {
clear:both;
}

これで、div "main-article" 内のコンテンツが右側のサイドバーより長くなると、高さが自動的に調整されなくなりました。代わりに、フッターにオーバーラップする大規模なオーバーフローがあります。このような「ネストされた」浮動要素について従うべきプロトコルはありますか。またはclear:both;、間違った方法を使用しましたか？

前もって感謝します

- - - アップデート - - - -

よし、これが私のページのリンクだ: http://www.currentconservation.org/new/?q=featured

これは drupal 上にあるため、すべての html を調べるのが面倒だと感じる人もいるかもしれません。しかし、ページは基本的に私が言及したのと同じ構造を持ち、それぞれの div 内に他のネストされた div があります。

ご覧のとおり、フッターは完全にずれています。

4

2 に答える 2

0

<div class="clear"></div>HTML ページで大量に使用するのは得策ではありません。要素を強制的に自動クリアする方法の例を次に示します。

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

注意:class="clearfix"親要素にa を適用します。

于 2013-07-30T10:48:19.773 に答える
0

これを試して 

<!-- Mind Wrap  -->
    <div class="mid-wrap">

    <!-- Content Wrap  -->
    <div class="content-wrap">
        <div class="left-sidebar"></div>
        <div class="main-article"> </div>
       <!-- Right sidebar -->
    <div class="right-sidebar"></div>
    </div> 
    </div>
<div class="clear"></div>

フッターのすぐ上に clear div を配置します

于 2013-07-30T11:18:04.083 に答える