web-dev-qa-db-ja.com

このインラインブロック要素がなぜ下に押されているのですか？

以下は私のコードです。私はそれを理解したいのです--- why #firstDivはすべてのブラウザによって押し下げられています。私は本当に理解するどういうわけかそれを上向きに引っ張るのではなく下向きにプッシュされているという事実の内部の仕組み。 （そして私は彼らのトップを合わせる方法を知っています:)）

そして私は、そのオーバーフローが隠れていることを知っています。

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}
<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ 。

overflowcss
228
Shawn Taylor

基本的に、コードに混乱を追加して混乱を引き起こしているため、まず実際の問題の理解を妨げる混乱を解消しようとします。

まず第一に、本当の問題は何かを確立する必要がありますか？ そのため、「inline-block」要素が下に押し出されています。

今、私たちはそれを理解し始め、最初に混乱を取り除きます。

1-3つのdivすべてに同じ境界線幅を与えないのはなぜですか？ それを与えましょう

2-フローティング要素は、下にプッシュされるインラインブロック要素との接続を持っていますか？いいえ、それは何の関係もありません。

したがって、 そのdivを完全に削除しました 。そして、あなたはインラインブロック要素が押し下げられるのと同じ振る舞いを目撃しています。

ここで、いくつかの literature が順番に来て、行ボックスの概念と、同じ行にどのように並べられるかを把握します。特に、質問の答えがあるため、最後の段落を注意深く読んでください。

「インラインブロック」のベースラインは、インフローラインボックスがない場合、または「オーバーフロー」プロパティの計算値が「可視」以外の場合を除き、通常フローの最後のラインボックスのベースラインです。その場合、ベースラインは下マージンEdgeです。

baseline について不明な場合は、簡単な言葉で簡単に説明します。

「gjpqy」を除くすべての文字はベースラインに書き込まれます。ベースラインは、これらの「ランダムな文字」のすぐ下に下線と同じ単純な水平線を引くかのように考えることができます。同じ行にある文字は、これらの文字の下部が行の下に落ちます。

したがって、「gjpqy」以外のすべての文字はベースラインよりも上に完全に書き込まれ、これらの文字の一部はベースラインより下に書き込まれます。

3-ラインのベースラインがどこにあるのかをチェックしてみませんか？ ベースラインを示す少数の文字 を行に追加しました。

4-divでベースラインを見つけるためにdivに文字を追加してみませんか？ここでは、 ベースラインを明確にするためにdivに追加された一部の文字 。

ベースラインについて理解したら、インラインブロックのベースラインについて次の簡略版をお読みください。

i）問題のインラインブロックのオーバーフロープロパティが可視に設定されている場合（これはデフォルトであるため、設定する必要はありません）。そのベースラインは、その行の包含ブロックのベースラインになります。

ii）問題のインラインブロックのオーバーフロープロパティがOTHER THAN visibleに設定されている場合。次に、その下マージンは、ボックスを含む行のベースラインになります。

  • 最初の詳細

緑色のdivで何が起こっているかという概念を明確にするために、これをもう一度見てください 。まだ混乱がある場合は、 ここに含まれるブロックのベースラインを確立するために緑色のdivの近くにさらに文字が追加されます で、緑色のdivベースラインが揃えられます。

さて、私は彼らが同じベースラインを持っていると主張していますか？右？

5-次に、それらをオーバーラップさせて、それらが互いに正しくフィットするかどうかを確認しますか？そこで、3番目のdivを左に移動します：35px; ベースラインが同じであるかどうかを確認するため ？

これで、最初のポイントが証明されました。

  • 詳細の2番目のポイント

さて、最初のポイントの説明の後、2番目のポイントは簡単に消化でき、overflowプロパティが可視（非表示）以外に設定されている最初のdivが行のベースラインに下マージンを持っていることがわかります。

これで、さらに説明するためにいくつかの実験を行うことができます。

  1. 最初のdiv overflow：visible（または完全に削除） に設定します。
  2. 2番目のdivオーバーフロー：可視以外 を設定します。
  3. 両方のdivオーバーフロー：可視以外 を設定します。

混乱を取り戻して、すべてがあなたにうまく見えているかどうかを確認します。

  1. 持参 フロートdivを戻す （もちろん必要です
    身体の幅を広げます）効果がないことがわかります。
  2. 同じ奇数マージンを戻す 。
  3. 緑のdivをオーバーフローに設定：質問で設定したとおりに表示 （境界線の幅が1pxから5pxに増加するため、 負の左端を調整 が表示されます問題はありません）
  4. 理解を助けるために追加した追加の文字を削除 。 （そしてもちろん、負の左を削除します）
  5. 最後に body widthを減らす が必要になりました。

そして今、私たちは元の場所に戻っています。

うまくいけば私はあなたの質問に答えました。

347
Gary Lindahl

CSSのvertical-alignのデフォルト値はbaselineです。この規則はinline-blockにも適用されます。これを読む http://www.brunildo.org/test/inline-block.html

あなたのvertical-align:top DIVにinline-blockを書きます。

これをチェックしてください http://jsfiddle.net/WGCyu/1/

315
sandeep

vertical-align:top;を使うだけ

デモ

30
Elyor

View this 他の例です。そのような振る舞いの理由は CSS3モジュール：line：3.2。Line Box wrapping [1] ：で説明されています。

一般に、ラインボックスの開始エッジはその包含ブロックの開始エッジに接触し、終了エッジはその包含ブロックの終了エッジに接触します。ただし、フローティングボックスは、包含ブロックEdgeとラインボックスEdgeの間にくることがあります。したがって、同じインラインフォーマットコンテキスト内のラインボックスは一般に同じインラインプログレッションアドバンス（包含ブロックのそれ）を持ちますが、利用可能なインラインプログレッションスペースがフロートのために減少する場合、それらは変わるかもしれません[...]

ご覧のとおり、3番目の要素はoverflowプロパティを持っていませんが、下方向に押されています。その理由は他のどこかにあるはずです。気づく2番目の動作は、 カスケードスタイルシートレベル2リビジョン1（CSS 2.1）仕様：9.5フロート[2] ：で説明されています。

フロートはフロー内にないため、フロートボックスの前後に作成された非配置ブロックボックスは、フロートが存在しない場合と同じように垂直に流れます。ただし、フロートの隣に作成された現在およびそれ以降のラインボックスは、フロートのマージンボックス用のスペースを空けるために必要に応じて短くされます。

この場合、すべてのdisplay:inline-block; divは特殊な種類のbaselineを使用しています 10.8行の高さの計算： 'line-height'および 'vertical-align'プロパティ（最後）[3] ：

'inline-block'のベースラインは、インフローラインボックスがない場合、または 'overflow'プロパティに 'visible'以外の計算値がある場合を除いて、通常フローの最後のラインボックスのベースラインです。その場合、ベースラインは下余白Edgeです。

したがって、浮動要素とinline-block要素を使用している場合、浮動要素は横にプッシュされ、インラインフォーマットは 1 に従って再計算されます。一方、次の要素は収まらない場合は短くなります。すでに最小のスペースで作業しているので、要素を変更してからそれらをプッシュする方法は他にありません 2 。この場合、一番上の要素がラッピングdivのサイズを定義し、baseline を定義します。一方、位置と幅の変更は 2 で定義されます。このような最小間隔の最大高さ要素には適用できません。この場合、私の最初のデモのような振る舞いができます。

最後に、あなたのoverflow:hiddenが#firstDivがあなたの#containerの下側の端に押されるのを妨げる理由は、私が セクション11 で見つけることができなかったけれども。 overflow:hiddenがないと、 2 およびで定義され、例外として定義されているように動作します。 デモ

TL; DR：W3の勧告とブラウザの実装をよく見てください。私の控え目な意見では、浮遊要素は周囲の要素に対して行われるすべての変更がわからない場合、予期しない動作を示すと判断されます。これはフロートに関する一般的な問題を示すもう一つの demo です。

8
Zeta

私はもともと答えることを始めました この質問 、しかしそれは私が終えることができる前に二重化されていたので、代わりにここに答えを投稿します。

まず、inline-blockが何であるかを理解する必要があります。
MDNでの定義 の意味は次のとおりです。

要素は、それが単一のインラインボックスであるかのように周囲のコンテンツと一緒に流れるブロック要素ボックスを生成します（置き換えられた要素がそうであるようにふるまいます）。

ここで何が起こっているのかを理解するには、vertical-alignを見てください。それはデフォルト値baselineです。

vertical position visualizations
このイラストでは、あなたはこのカラーチャートを持っています：
青：ベースライン
赤：行の高さの上下
緑：インラインコンテンツボックスの上下。

#left要素には、ベースラインを制御するテキストコンテンツがあります。これは、内側のテキストが#leftのベースラインを定義することを意味します。
#rightにはコンテンツがないため、ブラウザにはボックスの下部をベースラインとして使用する以外の選択肢はありません。

このビジュアライゼーションで、最初のインラインコンテナにテキストがあり、次のテキストが空の例でベースラインを描画しました。

Baseline drawn

1つの要素を特に上に揃えると、実際にはこの要素の上を行ボックスの上に揃えることになります。

例を見るとわかりやすいかもしれません。

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}
<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

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

結果はこれです - そして私は青いベースラインと赤いラインボックスを追加しました： Explained vertical-align
ここで起こることは、行ボックスの高さは行全体の内容がどのようにレイアウトされるかに依存するということです。つまり、一番上の線形を計算するには、最初にベースラインの線形を計算する必要があります。 #middle要素はvertical-align:topを持っているので、これはベースラインポジショニングには使用されません。ただし、#leftと#rightは、ベースラインが揃うように垂直方向に配置されています。これが行われると、フォントサイズが大きくなった結果として#right要素が少し押し上げられているため、ラインボックスの高さが増加しています。それから#middle要素の上の位置は計算することができます、そしてこれはラインボックスの上に沿っています。

2
awe

問題は、2番目のdivにfloat：leftを適用したためです。これは2番目のdivが左側に来るようにし、あなたの最初のdivは下がり、あなたの2番目のdivの後に来ます。 floatを適用すると、最初のdivにも残り、問題は解決します。

overflow：hiddenはあなたのレイアウトに何の問題も生じさせません、overflow：hiddenはdivの内側の要素だけに影響します、それは外側にある他の要素とは何の関係もありません。

1
Pal Singh

すべての要素のすべてのCSSプロパティを同じにしてみてください。

私は同様の問題を抱えていました、そしてこれを直している間に私はDiv ElementにFontプロパティを持つElementをドロップしていたことを確認しました。

その要素をFontプロパティで削除した後、すべてのDIVの配置が乱れました。これを修正するために、私はFontプロパティをそれにドロップされた要素と同じすべてのDIV要素に設定します。

次の例では、クラス ".dldCuboidButton"のDropped要素がfont-size：30 pxで定義されています。

そのため、残りのクラス、つまりDIV要素で使用される.cuboidRecycle、.liCollect、.dldCollectに同じプロパティを追加しました。このようにして、すべてのDIV要素は、要素をドロップする前後で同じ測定値に従います。

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

これは上記のCSSを使って動的に作成されたHTMLの例です。

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);
0
Rahul Varadkar

本文にpadding:0;を追加してdivのマージンを削除してみてください。

違いを確認するには、背景*とは別にbackground-color:*any色を追加します。

0
LOLZ