11

CSSでこれをどのように作成すればよいですか：

divs私は 2つ以上を持ちたいのですが、この例では div 間のマージンを固定する必要がありますwidth。percent30px 流体分割

私にとっての問題は、2 つの div 間のマージンです。これは、div をより大きな div に配置し、左右のパディングを 30px に設定しても問題ありませんが、2 つの div 間のマージンをどうすればよいですか?

たとえば、最初の div に追加しようとするとmargin-right:30px;、div の幅70% + 30pxが全体的に 100% を超え、2 番目の div が下がります。

それで、これに対する解決策は何ですか？

4

8 に答える 8

11

これは十分に近いですか？

ライブデモ

HTML:

<div id="container">
    <div id="left"><div id="left2">leftgggg</div></div>
    <div id="right">right</div>
</div>

CSS:

#container {
    margin: 0 30px 0 30px;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 70%;
    position: relative;
    left: -30px;
}
#left2 {
    height: 200px;
    margin: 0 0 0 30px;
    background: #ccc
}
#right {
    height: 200px;
    float: right;
    width: 30%;
    background: #666
}
于 2011-03-01T10:53:38.997 に答える
3

Calc のサポートは今ではまともなので、それを使用して単位を組み合わせて一致させることができます。それを使用すると、かなりうまく機能するものを思いつくことができます。

http://jsfiddle.net/CYTTA/1/

#a {
    margin-left: 30px;
    width: calc(70% - 30px - 15px);
}

#b {
    margin-left: 30px;
    margin-right: 30px;
    width: calc(30% - 30px - 15px);
}

calc の前に -webkit または -moz を付ける必要がある場合があります。

最初の幅は、70% から左余白 (30px) を差し引き、中央余白の半分 (15px) を差し引いたものです。2 つ目は、30% から右余白 (30px) を引いたものと、中央余白の半分 (15px) を引いたものです。

幅が 70% と 30% に正確に等しくなることはありませんが、マージンが固定された流動的なレイアウトになります。

于 2013-03-25T20:27:05.013 に答える
1

コンテナーの幅の比率を正確に 70% : 30% に保つ方法を見つけました。これを試してください、私のために働きます...

HTML: 

<div id="page">
<div id="a"><div id="aWrap">This is 70% of the available space...</div></div>
<div id="b"><div id="bWrap">This is 30% of the available space...</div></div>
</div>

CSS:

*{
    margin:0;
    padding:0;
}
#page{
    margin:30px;
}
#a{
    width:70%;
    float:left; 
}

#aWrap{
    margin-right:15px;
    background:#aaa;
}
#b{
    width:30%;
    float:right;        

}
#bWrap{
    margin-left:15px;
    background:#ddd;
}

頑張ってください！

于 2013-03-12T06:11:35.870 に答える
0

JavaScript の onload および onresize 関数を使用できます。それぞれで、最初にコンテナー グリッドの幅を見つけてから、70pc および 30pc グリッドの幅をピクセル単位で計算し、JS を介して設定します。

たとえば、ページの onload および onresize 関数で次のコードを使用します。

container_width = document.getElementById('container_box').style.width
width_70 = (container_width - 90) * 0.7
width_30 = (container_width - 90) * 0.3
document.getElementById('seventy_pc_box').style.width = width_70
document.getElementById('thirty_pc_box').style.width = width_30
于 2011-03-01T10:49:45.847 に答える
0

明らかかもしれませんが、おそらくすでに小枝を振っていますが、(70% + 30% + 30px) > 100% です。ある種の計算能力がなければ、これは機能しません。CSS2 にはその能力がないようです。別のポスターが示唆しているように、Javascriptでそれを行うことができ、CSS 3はそれを追加する予定です。

元のお問い合わせに対する解決策ではありませんが、右側のコンテナーに固定幅を適用し、左側の流動性を維持することができます。

<div style="margin-left: 30px; float: right; width: 270px;">
    <p>Content text ...</p>
</div>
<div style="margin-right: 300px;">
    <p>Sidebar text ...</p>
</div>

ただし、元のコメンターは正しいですが、最善の策はどちらかです。

于 2011-03-01T10:53:20.693 に答える
0

ここに私の解決策があります。

html

<div id="wrapper">
    <div id="left"></div>
    <div id="rightWrapper">
        <div id="right"></div>
    </div>
</div>

CSS

#wrapper {
    margin:0 30px;
}

#left {
    width:70%;
    height:200px;
    background:black;
    float:left;
}
#rightWrapper {
    margin-left:99px;
}
#right {
    width:30%;
    height:200px;
    float:right;
    background:grey;
}

デモ: http://jsfiddle.net/GEkG7/1/

于 2011-03-01T11:03:40.177 に答える
0

Thirtydot には、コンテナーに対する div の左側の位置を調整するための良い答え (私からの賛成票) があります。古いバージョンの Internet Explorer など、特定のブラウザーでのテストが必要になる可能性があることだけをお勧めします。

あるいは、左の位置を一定量だけ調整することは、単に異なる幅を適用するよりも混乱を招くと考えることもできます。

また、流動的な幅と固定マージンを求めていますが、全体的にこれはもはや流動的なレイアウトではありません... 30px は、大きな解像度でも小さな解像度でも同じように見えます..しかし、幅は変更され、幅をピクセルに固定するか、マージンをパーセンテージに設定します（一部のブラウザーでは、解像度を大きくするために max-width も使用してみてください）。新しいブラウザは、テキスト/ズーム サイズを大きくするときにピクセル レイアウトも調整します。古いブラウザでは、テキスト サイズの変更に EM を使用する必要があります。

パーセンテージとパディングの例:

#container {
    margin: 0 8% 0 8%;
    overflow: hidden;
    background: #f3c
}
#left {
    float: left;
    width: 62%;
    position: relative;
    padding-right: 8%;
}
于 2011-03-01T11:04:14.767 に答える
0

ええ、私の解決策は他の解決策と似ていました。A#wrapには30pxパディングが#mainあり#side、パーセンテージが設定されており、それぞれ左右にフロートされています。その中に#main余分な右マージンがあります。<div>30px

http://jsfiddle.net/Marcel/FdMFh/embedded/result/

私がインストールしたすべての最新のブラウザー (Chrome、Firefox、Safari、Opera、IE9 RC) で問題なく動作します。

于 2011-03-01T11:07:03.370 に答える