0

私は次のHTMLを持っています:

<div id="wrap">
  <div id="col-1">column 1</div>
  <div id="col-2">column 2</div>
  <div id="col-3">column 3</div>
</div>

そして、私は次のCSSを持っています:

#wrap {
  margin: 0 auto 0;
  width: 90%;
}

#col-1, #col-2, #col-3 {
  float: left;
  width: 30%;
}

現時点では、「ラップ」とページの間の余白は流動的です。

そして、各列の間にスペースはありません...

折り返しとページの間の余白を 40px に固定するにはどうすればよいですか?

また、各列間の余白も 15px に固定されていますか?

注: 「box-sizing: border-box;」を適用しています。すべての要素に。問題を解決しやすくなると思います...しかし、それを行う最善の方法がわかりません。

ありがとう、ミゲル

4

2 に答える 2

0

私はあなたが求めていることを理解していると思います...これについて話しているのですか、それともマージンに固定ピクセル幅を設定するよりも複雑なことについて話しているのですか?

コメントの詳細情報に基づいて更新された CSS (再度)

body {
  background: white;
  margin: 40px;
}

#wrap {
  background: red;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

#col-1, #col-2, #col-3 {
  background: #ccc;
  float: left;
  padding: 8px;
  width: 33.333333%;

  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#col-1 { padding: 0 8px 0 0; }

#col-2 { padding: 0 8px; }

#col-3 {
  float: right;
  padding: 0 0 0 8px;
}

span { background: red; display: block; } /** Just to show content-area **/

Codepen スケッチ: http://cdpn.io/xEueC

于 2013-08-19T19:03:18.470 に答える