1

ボディ幅の 80% である 1 つのコンテナー内に 2 つの隣接する流動幅の div (各幅: 50%) を含むレイアウトに取り組んでいます。

左と右の 50% div の間に 10px のマージンが必要ですが、アセンブリ全体が 80% のボディ幅のコンテナー内に収まるようにする必要があります。左 DIV と右 DIV の % 幅を減らすと 10 ピクセルの中央余白を確保できることは理解していますが、左 DIV/右 DIV/10 ピクセル 余白のアセンブリ全体が多くの場合、本体の 80% にならないことも意味します。幅。

左右の DIV の幅を再計算して、ブラウザー ウィンドウのサイズが変更されても、その間に 10 ピクセルの固定マージンがある場合にボディ幅の 80% を累積的に占有する方法はありますか? これがCSSで実行可能かどうかはわかりません。Javascript がそれを達成する唯一の方法である場合は問題ありませんが、私が見逃している隠された CSS トリックがあれば素晴らしいでしょう。

これが私のCSSです：

#logoplace {
width: 200px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}

#navcontainer {
height: 30px;
width: 80%;
background-color: white;
margin: 5px auto;
opacity: 0.7;
}

#navcontainer:hover {
opacity: 1;
}

#rowone {
width: 80%;
height: 120px;
background-color: white;
margin: 5px auto;
}

#rowoneone {
width: 50%;
height: 120px;
background-color: green;
margin-right: 5px;
float: left;
}

#rowonetwo {
width: 50%;
height: 120px;
background-color: blue;
margin-left: 5px;
float: right;
}

html, body
{
height: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

そして私のHTML：

<div id="logoplace">
</div>
<div id="navcontainer">
</div>
<div id="rowone">
    <div id="rowoneone">
    </div>
    <div id="rowonetwo">
    </div>
</div>

最後に、取得した結果を示すJsFiddleを示します。両方の浮動 DIV を 50% に設定し、固定マージンを追加したため、右側の浮動 DIV が押し下げられています。

どんな助けでも大歓迎です！

4

5 に答える 5

0

ブラウザのサポートに応じて、新しいボックスサイズのcss宣言を使用できます。http://www.w3.org/TR/css3-ui/#box-sizing

于 2012-10-30T17:38:30.443 に答える
0

HTMLに要素を追加できる場合は、次のことを実行できます...

<div id="rowone">
  <div id="rowonepad">
    <div id="rowoneone">
    </div>
    <div id="rowonetwo">
    </div>
  </div>
</div>

そして次のCSS

#rowone {
  width: 80%;
  overflow: hidden;
}
#rowonepad {
  padding: 0 5px;
}
#rowoneone {
  float: left;
  width: 50%;
  margin-left: -5px;
}
#rowonetwo {
  float: right;
  width: 50%;
  margin-right: -5px;
}

または、プロパティを使用しbox-sizing: border-box;て、ラッパーの必要性をなくすことができます

<div id="rowone">
  <div id="rowoneone">
  </div>
  <div id="rowonetwo">
  </div>
</div>

そして次のCSS

#rowone {
  width: 80%;
  overflow: hidden;
}
#rowoneone {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 5px;
}
#rowonetwo {
  box-sizing: border-box;
  float: right;
  width: 50%;
  padding-left: 5px;
}
于 2012-10-30T17:33:18.943 に答える
0

プロジェクトでボーダーボックス、最初のタイプ、および n 番目のタイプの「タイプ」を使用することに慣れている場合は、ガター幅を固定する必要があるときに私が行ってきたことです。border-box は 94% ですが、:first of type のような CSS3 セレクターは IE 9 以降です。ポリフィルがあるかもしれませんか？以下は重要な部分だけです。ラッパーを使用するのは好きではありませんが、機能します。より鮮明な画像については、リンクを参照してください。計算はかなり奇妙になりますが、必要な数の列を使用して計算できます。

http://codepen.io/sheriffderek

HTML

<div class="column-w">
  <div class="column main">

    [column01]

  </div>  
</div>

<div class="column-w">
  <div class="column sub">

    [column02]

  </div>  
</div>

CSS

.column-w {
  width: 50%;
  float: left;
}

.column-w:first-of-type {
  padding-right: 10px;
}

.column-w:last-of-type {
  padding-left: 10px;
}
于 2013-05-17T05:17:22.383 に答える
0

http://jsfiddle.net/thirtydot/KX6eR/30/

追加のラッパーを追加します。

<div id="rowone">
    <div id="rowonewrapper">
        <div id="rowoneone"></div>
        <div id="rowonetwo"></div>
    </div>
</div>

次に、内側divの 2 つの をわずかに再配置します。

#rowonewrapper {
    margin-right: 10px;
}
#rowoneone {
    width: 50%;
    height: 120px;
    background-color: green;
    float: left;
}

#rowonetwo {
    width: 50%;
    height: 120px;
    background-color: blue;
    float: right;
    position: relative;
    left: 10px;
}
于 2012-11-08T10:43:07.670 に答える
0

わかりました、これは 2 年前の質問ですが、ええ、使い方を学ぶまで長い時間がかかりました

calc(X% [math operand] Xpx)

次のようなクロスブラウザのバリアントがあります。

-webkit-calc(...)

私は他の人を知りません。

ただし、追加のラッパーを使用した上記のソリューションが大好きです。美しいハックです！:D

于 2014-06-22T09:56:49.660 に答える