2

2つのコンテナにいくつかのフロートがあります。コンテナーはフロートを囲む必要がありますが、両方とも 100% の最小高さを維持する必要があります (コンテナー > 別のコンテナー > フロート)。

最小の高さを試してみましたが、明らかに最小の高さには、最小ではなく正確な高さの親が必要です。したがって、両方のコンテナで実際には機能せず、外側のコンテナでのみ機能します。

コンテナの高さが 100% の表示テーブルは、私が望むことをしているようです。少なくとも 100% の高さにしますが、コンテンツが長い場合は伸縮可能にします。

問題：

Display:table はコンテナの幅を無効にします。後でマージンを使用して幅を定義する必要があるため、幅を 100% に設定することはできません。使用可能なすべての水平方向のスペースを占有して、通常の div のように動作させる必要があります。

私の問題の解決策はありますか?

http://jsfiddle.net/Ka3TT/2/

私のコード:

<html>
    <body>
<div class="enclose2">
<div class="enclose1">
<div class="float">
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>
Float<br>

</div>
<div class="float">Float</div>
    <div class="float">Float</div>
</div>
</div>
</body>
</html>​

私のCSS：

.float {
    width:100px;
    border:solid 1px black;
    float:left;
}
.enclose1, .enclose2 {
 height:100%;
display:table;
    background-color:#ccc;
}    
body, html {
    width:100%;
    height:100%;
}

</p>

4

2 に答える 2

1

それはあなたのマージンが後で何になるかによって異なります、その情報なしで暗闇の中でのショットのようなものですが、あなたは次のようなものを使ってみるかもしれません：

.float {
border:solid 1px black;
float:left;
height:100%;
width:29%;
margin-left:20px;
}
.enclose1, .enclose2 {
height:100%;
display:table;
background-color:#ccc;
width:100%;
}    
body, html {
width:100%;
height:100%;
}

3つの列を一列に並べて同じ高さに拡張し、divを水平方向に拡張して、使用可能なスペース全体を埋めます。enclose divがラッパー内にあるかどうか、または完全なコードがどのようになるかは正確にはわかりません。そのため、enclose1と2の幅と.floatの幅とマージンをあなたが探しているフィット感を手に入れましょう。

注：利用可能なすべての水平方向のスペースを占有するが、フロートの幅は100ピクセルに固定されており、囲いを100％の幅に設定したくないと言ったので、少し混乱するかもしれません。例ですが、原則は、次のように、囲みの幅とマージンを固定して機能します。

.float {
width:33%;
border:solid 1px black;
float:left;
}
.enclose1 {
height:100%;
display:table;
background-color:#bbb;
width:800px;
margin:50px;
}   

body, html {
width:100%;
height:100%;
}
.enclose2 {
height:100%;
background-color:#ccc;
display:table;
}

100pxの固定幅のフロートで水平方向に拡張するencloseクラスだけの場合は、いつでも全体をwidth：100％のラッパーに入れて、パディングを追加してから、encloseをwidth 100％に設定できます。囲みに余白を付けるのと同じ方法ですが、水平方向に拡張できるようにします。

長い間答えて申し訳ありませんが、最終的な目標がどうなるかによって異なります。

于 2012-11-23T02:31:54.357 に答える
1

あなたがやろうとしていることを私が理解できれば。display: table-cellフロートをフロートする代わりに、フロートにa を適用します。これにより、コンテンツに関係なく、すべてのブロックが同じ高さになります。

ここにデモがあります: http://jsfiddle.net/MadLittleMods/Ka3TT/4/

クラス名を変更したい場合があります...

.float {
    width:100px;
    border:solid 1px black;
    display: table-cell;
}
于 2012-11-23T03:53:13.740 に答える