幅がそれぞれ50％の2つのインラインブロック要素が、1つの行に並べては収まりません

Question 1

<!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を見るとわかるように、そうではありません。

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

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

しかし、私の元の質問は残ります。両方のdivがインラインブロック要素として保持されているのに、それらが並んでフィットしないのはなぜですか？

Question 2

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

したがって、2つのdivsはどちらも幅が50％であり、さらに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>

スニペットを展開

参照：

以下のようMarcosPérezGudeは@ と述べ、最善の方法は、使用することですrem、とにいくつかのデフォルト値を追加するfont-sizeにはhtml（のようにタグHTML5Boilerplate）。例：

html{
    font-size: 1em;
}

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

.ib-child{
    display: inline-block;
    font-size: 1rem;
}

更新：2018年が近づいているため、フレックスボックスまたはさらに優れたCSSグリッドレイアウトを使用してください。

Question 3

css3の良い答えは：

white-space: nowrap;

親ノード、および：

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

div（またはその他）で50％

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

編集：

には別の方法があります：

font-size: 0;

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

Question 4

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

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

Question 5

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

<div id="left">Left</div><div id="right">Right</div>

Question 6

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

display:block;

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

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

または追加

margin: -1en;

レンダリングされた単一のスペースが占めるスペースを軽減するために、いずれかのdivに追加します。

Question 7

以下のコードを確認してください：

body {
    margin: 0;
}
#left {
    width: 50%;
    background: lightblue;
    display: inline-block;
    float:left;
}
#right {
    width: 50%;
    background: orange;
    display: inline-block;
    float:left;
}

<div id="left">Left</div>
<div id="right">Right</div>

スニペットを展開

Question 8

フレックスボックスの例-これは、2つの並んだ要素を保持する親クラスに使用されます。

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

別のdiv内でdivを垂直方向に中央揃えして撮影

Question 9

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

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

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

Question 10

フロートを追加：左; 両方のdivタグに。

div {
  float: left;
}

スニペットを展開