91 
<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
}
</style>
</head>
<body>
    <div id="left">Left</div>
    <div id="right">Right</div>
</body>
</html>

JSFiddle: http://jsfiddle.net/5EcPK/

上記のコードは、#left div と #right div を 1 行に並べて配置しようとしています。しかし、上記の JSFiddle URL でわかるように、そうではありません。

div の 1 つの幅を 49% に減らすことで問題を解決できました。http://jsfiddle.net/mUKSC/を参照してください。ただし、2 つの div の間に小さなギャップが生じるため、これは理想的なソリューションではありません。

問題を解決できる別の方法は、両方の div をフローティングすることです。http://jsfiddle.net/VptQm/を参照してください。これはうまくいきます。

しかし、私の最初の質問は残っています。両方の div がインライン ブロック要素として保持されている場合、それらが横に収まらないのはなぜですか?

4

9 に答える 9

150

更新: 2021 年なので、代わりにflexboxまたはそれ以上のCSS グリッド レイアウトinline-blockを使用してください。

要素を使用する場合、それらの要素間inline-blockには常に問題があります(そのスペースは約 4px 幅です)。whitespace

したがって、divs両方とも幅が 50% の 2 つに加えて、whitespace(~ 4px) は幅が 100% を超えているため、壊れます。問題の例:

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

これを修正するには、いくつかの方法があります。

1.それらの要素の間にスペースがない

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>

2. HTML コメントの使用

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div><!--
--><div class="right">bar</div>

3. 親font-sizeをに設定し、要素0に値を追加しますinline-block

body{
  margin: 0; /* removing the default body margin */
}

.parent{
  font-size: 0;  /* parent value */
}

.parent > div{
  display: inline-block;
  width: 50%;
  font-size: 16px; /* some value */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="parent">
  <div class="left">foo</div>
  <div class="right">bar</div>
</div>

4.それらの間に負のマージンを使用する（望ましくない）

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
  margin-right: -4px; /* negative margin */
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>

5. 落し込み角度

body{
  margin: 0; /* removing the default body margin */
}

div{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>

<hr>

<div class="left">foo</div><div class="right">
bar</div>

6.特定のHTML 終了タグをスキップする (参照用の @thirtydot に感謝します)

body{
  margin: 0; /* removing the default body margin */
}

ul{
  margin: 0; /* removing the default ul margin */
  padding: 0; /* removing the default ul padding */
}

li{
  display: inline-block;
  width: 50%;
}

.left{
  background-color: aqua;
}

.right{
  background-color: gold;
}
<ul>
  <li class="left">foo
  <li class="right">bar
</ul>

参考文献:

  1. CSS トリックのインライン ブロック要素間のスペースとの戦い
  2. David Walshによるインラインブロック要素間の空白の削除
  3. インラインブロック要素間のスペースを削除するには?

@MarcosPérezGude が言ったように、最善の方法は を使用し、タグにremデフォルト値を追加することです( HTML5Boilerplateのように)。例：font-sizehtml

html{
    font-size: 1em;
}

.ib-parent{             /* ib -> inline-block */
    font-size: 0;
}

.ib-child{
    display: inline-block;
    font-size: 1rem;
}
于 2013-08-15T21:41:01.647 に答える
26

css3 の良い答えは次のとおりです。

white-space: nowrap;

親ノードで、および:

white-space: normal;
vertical-align: top;

div (またはその他) で 50%

例： http ://jsfiddle.net/YpTMh/19/

編集：

別の方法があります：

font-size: 0;

親ノードの場合、子ノードでオーバーライドします

EDIT 2021 : 個人的には、今すぐフレックスボックスを使用することをお勧めします: https://the-echoplex.net/flexyboxes/

于 2015-02-03T19:13:39.173 に答える
7

これは、2 つの div 間の空白がスペースとして解釈されているためです。<div>以下に示すようにタグを並べると、問題は修正されます。

<div id="left"></div><div id="right"></div>
于 2013-08-15T21:41:09.570 に答える
4

インラインブロックではなくブロックにします。これにより、div 間のスペースを無視して div がレンダリングされます。

display:block;

またはタグ間のスペースを削除します

<div id='left'></div><div id='right'></div>

または追加

margin: -1en;

レンダリングされた単一のスペースによって占有されるスペースを軽減するために、div の 1 つに。

于 2013-08-15T21:39:55.813 に答える
4

要素間にスペースがあるためです。すべての空白を削除すると、それらは収まります。

<div id="left">Left</div><div id="right">Right</div>
于 2013-08-15T21:41:29.650 に答える
1

インライン要素を保持する div に css display:inline を追加することで実行できます。

負の値のマージンを使用して空白を削除する際に、この特定の要素に空白を追加する必要があります。クラスに追加すると、このクラスが使用されている場所に影響します。

したがって、display:inline; を使用する方が安全です。

于 2014-11-05T14:16:03.673 に答える