0

私は次のCSSのビットを解決しようとしています:

<style type="text/css">
.parent {
    position: relative;
    height: 140px;
}
.parent .leftbit {
    width: 370px;
    position: absolute;
    top: 0px; left: 0px;
}
.parent .rightbit {
    width: 220px;
    position: absolute;
    top: 0px; left: 370px;
}

</style>
<div class="parent">
    <div class = "leftbit">abcdef</div>
    <div class = "rightbit">111111</div>
</div>


<div class="parent">
    <div class = "leftbit">ghijk</div>
    <div class = "rightbit">222222</div>
</div>

これはうまくいきますが、divの高さを自動にして、左と右のビットdivのコンテンツの高さに関係なく、次々と積み重ねられるようにしたい..「高さ：140px;」を削除すると div が互いの上に印刷される親を並べます。これは、コードが leftbit div と rightbit div の高さを認識していないため、親に高さがないため、親 div を同じ場所に出力するだけだからだと思います。親 div を左右の div の高さにする方法を教えてください。追加の関数といくつかの Jquery コードを追加することでそれを行う方法を見ることができますが、これはやり過ぎのように思えます。それを行うためのより明白な方法が欠けていると思いますが、解決できません。ありがとう。

4

3 に答える 3

1

フィドル

floatの代わりに使用position: absolute;

.parent {
    position: relative;
    border: 1px solid #f00; overflow: hidden;
}
.parent .leftbit {
    width: 370px;    
    top: 0px; float: left;
}
.parent .rightbit {
    width: 220px;
    top: 0px; float: right;
}
于 2012-08-28T09:46:16.267 に答える
1

絶対値ではなく浮動小数点数を使用してから、親にclearfixを追加すると、子の高さに従います。

于 2012-08-28T09:42:57.520 に答える
0

親を子とともに自動的に展開する場合は、相対配置とフロート ベースのレイアウトを使用する必要があります。子を左にフロートさせclear: both div、親要素の後に a を指定します。それはすべきです。

于 2012-08-28T09:43:15.617 に答える