3

簡単に言えば、私は列と行を備えたレスポンシブWebレイアウトに取り組んでいます。各列の幅は、事前定義された合計幅に関連して設定されます。

列幅/全幅=幅％

高さは固定されています。

問題は、コンテンツの幅を流動的にしたいのですが、マージンとパディングは以下のように固定幅にしたいということです。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

コードは次のようになります。

HTML

<body>
   <div id="left">Left</div>
   <div id="middle">Middle</div>
   <div id="right">Right</div>
</body>

CSS

div {
   float: left;
   padding: 0.5em;
   box-sizing: border-box;
   width: 33.3333333333333%; height 5em; line-height: 5em; text-align: center;
}    

#left {
   background-color: red;
}

#middle {
   background-color: green;
}

#right {
   background-color: blue;
}

http://jsfiddle.net/langoon/Zxn8E/2/

私はいくつかの解決策を考えましたが、それらのどれも私が探していることをしていないようです：

  1. 「box-sizing」を「margin-box」に設定します。ほとんどのブラウザではサポートされていません。
  2. 余白の代わりに、境界線を使用します。その境界線が必要で、後で別のスタイルにすることができます。
  3. 各ボックスを外側の「div」にネストします。DOMが処理する要素の数を最小限に抑えることを好みます。
  4. ここで提案されているように負のマージンを設定 します。それらの間に固定ピクセルマージンがある流動的な列レイアウト？。行ごとにラッピング'div'が必要なようで、問題が発生する可能性があります。
  5. JavaScript。結構です。

私はケーキを持って同時にそれを食べようとしていますか、それとも欠点なしでこれを行う方法はありますか？

4

3 に答える 3

3

：before /：afterを使用

http://jsfiddle.net/PhilippeVay/Zxn8E/11/（インラインブロック要素間の空白を防ぐために、終了タグがどこにあるかに注意してください）:before：:afterhttp: //jsfiddle.net/PhilippeVay/Zxn8E/11/

互換性：IE7以下のIE8+はこれらの疑似を理解しません。

フレキシブルボックスレイアウトモジュール付き

このCSS3モジュールを使用すると、同じ幅の列を内側にガターを配置し、外側にガターを配置することはできません。これはまさにあなたが達成したいことです。構文が数か月で2回変更されたので、いじくり回しません。まだ新しいものを見ていません。
caniuse.comでの互換性（IE9-なし、Operaなし）

于 2012-08-20T18:24:38.457 に答える
1

これを解決する最善の方法は、負のマージンとボックスサイズ設定プロパティを使用することだと思います。簡単な例：

HTML：

<ul>
    <li><div class="red">Red</div></li>
    <li><div class="green">Green</div></li>
    <li><div class="blue">Blue</div></li>
</ul>

CSS：

ul
{
    list-style: none;
    margin: 0 0 0 -15px; /* Note the negative margin */
    padding: 0;
    overflow: hidden;
}

li
{
    float: left;
    width: 33.3333%;
    padding: 0 0 25px 15px;
    box-sizing: border-box;
}

/* Some decorations */
div { padding: 25px 0; color: white; text-align: center; }
div.red { background: red; }
div.green { background: green; }
div.blue { background: blue; }

結果：

ここに画像の説明を入力してください

ライブデモ

これが実際に動作するのを見たい場合は、フィドルを作成しました。

于 2013-07-19T14:50:55.100 に答える
0

国境ルートを試してください：

http://jsfiddle.net/Zxn8E/3/

div {
    float: left;
    box-sizing: border-box;

    border-top:0.5em solid cyan;
    border-bottom:0.5em solid cyan;
    border-left:0.5em solid cyan;

    width: 33.3333333%; height 5em; line-height: 5em; text-align: center;
}    

div.last{ border-right:0.5em solid cyan; } 


<body>
  <div id="left">Left</div>
  <div id="middle">Middle</div>
  <div id="right" class="last">Right</div>
</body>
于 2012-08-20T17:31:33.557 に答える