0

私のページにはいくつかの div がありますが、2 つのタイプがあります。前者は「メインアイテム」、後者は「サブアイテム」です。問題は、サブ項目がメイン項目と重なっているということです。

ここに jsfiddle があります: http://jsfiddle.net/CcPyG/

より多くのクリアランスのために、ここに私のコードがあります:

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}
.sub-item {
    margin-top: 40px;
}
4

5 に答える 5

2

あなたitemは を保持していsub-itemます。問題は、item高さが 35px に固定されていることです。sub-item40px の上余白があります。これは、アイテムの上部から の上部までの距離sub-itemが 40 ピクセルであることを意味します。これは、アイテム全体のサイズよりも大きいitemです!

解決するには、CSSheight: 35pxから fromを削除します。この更新された JSFiddle.itemを参照してください。

于 2013-06-10T15:31:52.023 に答える
2

親の固定heightがあります。それらが重複している理由は...まあ、次のdivは現在のdivが終了するところから始まり、子にマージンを与えたので、次のdivに表示されます。35px.item40px

オーバーラップせずにすべてを表示する場合は、高さをauto?に設定します。より良い解決策を考える前に、なぜあなたが を選んだのかを知る必要があると思います。height:35px

于 2013-06-10T15:32:08.903 に答える
2

の高さを削除してください.item:

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    **/*height: 35px;*/**
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}
于 2013-06-10T15:32:32.330 に答える
1

.sub-item の上余白よりも小さい .item div に設定された高さがあります。高さを外すとちゃんと流れます。これで何を達成しようとしていますか？

于 2013-06-10T15:33:04.847 に答える
1

これを試して：

.item {
    color: black;
    font-family: Menu;
    /*height: 35px;*/
    line-height: 35px;
    text-align: center;
    vertical-align: middle;
    width: 250px;
}
于 2013-06-10T15:35:20.133 に答える