0

div を作成して利用可能なすべてのスペースを埋める方法について多くの質問を見てきましたが、それでもわかりませんでした。

例

<div>
    <div id="div1">    
        <div id="div2"></div>
        <div id="div3">
            Some text
        </div>
    </div>
</div>​

そしてCSS

div { height:100px; }
#div1 { width: 100%; }
#div2 { background-color:blue; float:left; width:30%; }
#div3 { background-color:green; float:left; }

緑のブロックで水平方向のスペースをすべて埋めたいのです#div3が、上部の CSS が機能しません - jsFiddle。

widthご覧のとおり、手動で設定していません。書いwidth: auto;てもうまくいきません。

4

3 に答える 3

1

2 つのソリューション。

解決策 1

浮いているので緑の要素にコンクリートwidth（ではない）を設定します。auto

解決策 2

緑の要素を浮かせないでください。緑の要素を青の要素の下に折り返すかどうか (高い場合) に応じて、左マージンを適切に設定します。

margin-left: 30%; /* should always be right of the blue */

他の余白は自由に設定できます。

緑の余白div

div緑の高さが青の高さよりも高くなったときに、緑が青の下に拡大することを許可するかどうかはわかりません。しかし、それを真っ青に保ちたいとしますdiv。

緑を浮遊させないことで、緑の寸法を自分の好みに合わせて操作できるため、これが最も簡単になります。これは、青よりも高く、青の下に折り返されず、固定の右マージンがピクセル単位で設定されている緑を示す例です。動作します。div

緑の要素に追加のパディングまたは境界線を追加することもできますが、それでも機能します。

JSFiddleでの例

この例では、左divにフロートし、右の緑divを常にその右に保ちながら、それらの間にスペースを追加しています。次のCan I use dataでサポートされているCSS3calc()関数を使用しています。

ご覧のとおり、HTML も大幅に簡略化しました。

<div class="left">Nav</div>
<div class="right">Content</div>​

CSS には、calc使用するための追加のブラウザー固有の設定が含まれていますが、将来的には廃止され、最後の設定のみmargin-leftがブラウザーで使用されます。

.left {
    background-color: #69c;
    height: 100px;
    float: left;
    width: 30%;
}
.right {
    background-color: #9c9;
    height: 150px;
    margin-left: -webkit-calc(30% + 10px);
    margin-left: -moz-calc(30% + 10px);
    margin-left: calc(30% + 10px);
}
于 2012-11-23T14:17:15.043 に答える
0

親divのBGカラーを設定する必要があります

  #div1 { width: 100%;background-color:green; }

div3でやりたい場合は、そのdivに幅を与えます

#div3 { background-color:green; float:left; width: 70%; }
于 2012-11-23T14:13:54.773 に答える
0

あなたが欲しいと思うものが欲しいなら... width:100% を div に、width:70% を div3 に設定します。

それがあなたが望んでいたものではない場合は、もう少し具体的にしてください

于 2012-11-23T14:16:12.363 に答える