5

何が間違っているのかわかりませんが、ボーダーボックスを追加することで、これらの4つのボックスがきれいに収まると思いました。

http://jsfiddle.net/jzhang172/x3ftdx6n/

.ok{
width:300px;
    background:red;
    height:100px;
    box-sizing:border-box;
}

.box{
    display:inline-block; 
    box-sizing:border-box;
    width:25%;
    border:2px solid blue;
    height:100%;
}
<div class="ok">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
    
</div>

4

2 に答える 2

11

問題は、inline-block要素がデフォルトで少し余分なスペースでレンダリングされることです。

なんで？divセット to にinline-blockはいくつかのインライン要素の特性があるためです。

要素間のスペースまたは改行はspan、ブラウザーによってレンダリングされるスペースになります。

同様に、<p>要素にテキストを書いている場合、スペースバーを押すか改行を追加するたびに、ブラウザによってスペースがレンダリングされます。

これと同じルールが div にも適用されinline-blockます。ソースにスペースまたは改行があると、スペースがレンダリングされます。これにより予期しない幅が作成され、オーバーフローや折り返しが発生する可能性があります。

1 つの解決策は、ソース内の要素間のすべての空白を削除することです。

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
}
<div class="ok"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div></div>

親に別のメソッドを設定font-size: 0し、必要に応じて子のフォントを復元します。

.ok {
  width: 300px;
  background: red;
  height: 100px;
  box-sizing: border-box;
  font-size: 0;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 25%;
  border: 2px solid blue;
  height: 100%;
  font-size: 16px;
}
<div class="ok">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

その他のオプションには、負のマージン、終了タグの省略、コメント タグの使用、float、flexboxなどがあります。詳細については、次の記事を参照してください。

于 2015-09-26T19:44:25.437 に答える