0

私はJSBinに書いた本当に簡単な例を持っています。次のようになります。

a

私がやりたいのは、指定された幅と高さの 2 つの div を取り、それらの間に隙間なく並べて表示することだけです。私はdisplay: inline-block上記を達成するために使用しましたが、コンテンツとスタイリングの分離の考えに完全に違反しているように見える、div 間の空白をむさぼり食うことを拒否しているようです。

ここに私のHTMLがあります:

<div class="container">
  <div class="a">
    <!-- completely empty -->
  </div>

  <div class="b">
    <!-- nothing at all -->
  </div>
</div>

ここに私のCSSがあります：

.container {
  display: inline-block;
}

.a {
  width: 320px;
  height: 240px;

  display: inline-block;

  background-color: #83C5D1;
}

.b {
  width: 180px;
  height: 240px;

  display: inline-block;

  background-color: #B2D9D6;
}

この問題を回避して、HTML に触れずにそれらをぴったりと合わせるにはどうすればよいですか?

4

3 に答える 3

0

float:left両方の div クラスに追加し.a、.b

私はあなたのJSBin http://jsbin.com/iwihox/4/editを更新しました

于 2013-08-15T22:14:47.577 に答える
0

表形式のデザインを使用しています。 一攫千金しよう！

.container {
  display: table-row;
}

.container > * {
  display: table-cell;
}

編集: Firefox はinline-block childrenが好きではありませんでした。

于 2013-08-15T22:19:49.897 に答える