7

横一列に4つのdivがあります。divの間にスペースを入れたいのですが（マージンを使用していると思いますか？）、そうするとdivが親コンテナをオーバーフローします。

マージンが 0 の場合、これらは 1 行にきれいに並んでいます。

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div>
</div>

ここで 5px のマージンを導入すると、最後のボタンが折り返されます。

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div>
</div>

これは、幅属性がパーセンテージの場合、要素の合計幅のマージンを考慮していないためだと思いますか? これを行う正しい方法は何ですか？

ありがとう

4

7 に答える 7

13

考えられるアイデアは次のとおりです。

  1. width: 25%; float:left;divのスタイルからを削除します
  2. 4つの色付きのdivのそれぞれを次のようなdivにラップしますstyle="width: 25%; float:left;"

このアプローチの利点は、4つの列すべての幅が等しく、それらの間のギャップが常に5px*2になることです。

外観は次のとおりです。

.cellContainer {
  width: 25%;
  float: left;
}
<div style="width:100%; height: 200px; background-color: grey;">
  <div class="cellContainer">
    <div style="margin: 5px; background-color: red;">A</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: orange;">B</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: green;">C</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: blue;">D</div>
  </div>
</div>

于 2012-11-21T16:35:17.397 に答える
7

divsa を少し小さくして、パーセンテージのマージンを追加することをお勧めします。

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div>
</div>

http://jsfiddle.net/YJT7q/

于 2012-11-21T16:26:48.913 に答える
2

この問題にアプローチするかなりの方法があります。

box-sizing css3 プロパティを使用して、境界線で余白をシミュレートします。

http://jsfiddle.net/Z7mFr/1/

div.inside {
 width: 25%;
 float:left;
 border-right: 5px solid grey;
 background-color: blue;
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
}

<div style="width:100%; height: 200px; background-color: grey;">
 <div class="inside">A</div>
 <div class="inside">B</div>
 <div class="inside">C</div>
 <div class="inside">D</div>
</div>

要素の幅のパーセンテージを減らし、margin-right を追加します。

http://jsfiddle.net/mJfz3/

.outer {
 width:100%;
 background:#999;
 overflow:auto;
}

.inside {
 float:left;
 width:24%;
 margin-right:1%;
 background:#333;
}
于 2012-11-21T16:47:42.503 に答える
1

タグの左マージンをliパーセントで設定し、親に同じ負の左マージンを設定できます。

ul {margin-left:-5%;}
li {width:20%;margin-left:5%;float:left;}
<ul>
  <li>A
  <li>B
  <li>C
  <li>D
</ul>

http://jsfiddle.net/UZHbS/

于 2012-11-21T16:28:20.727 に答える
1

これはwidth、a が指定された場合、 / s%が考慮されないためです。量をおそらくまたはに減らす必要があります。これが完了したら問題ありませんが、ハードコーディングされたマージンはあるが相対的なサイズであるため、これを常に正しく機能させたい場合は、画面サイズに基づいてさまざまなオプションを提供する必要があります。paddingmargin24%24.5%

于 2012-11-21T16:27:33.640 に答える
0

別のアイデア: div の反対側でマージンを補います。

例として達成しようとしている間隔のある側の場合: 10px、反対側の場合は -10px で補正します。わたしにはできる。これはすべてのシナリオで機能するとは限りませんが、レイアウトや他の要素の間隔によってはうまく機能する可能性があります。

于 2015-06-18T22:51:48.113 に答える
0

すべての div を個々のテーブル セルに配置し、テーブル スタイルを に設定しますpadding: 5px;。

例えば

<table style="width: 100%; padding: 5px;">
<tbody>
<tr>
<td>
<div style="background-color: red;">A</div>
</td>
<td>
<div style="background-color: orange;">B</div>
</td>
<td>
<div style="background-color: green;">C</div>
</td>
<td>
<div style="background-color: blue;">D</div>
</td>
</tr>
</tbody>
</table>

于 2015-07-15T14:14:45.667 に答える