ディスプレイ内のブロックレベル要素：インラインブロック

StackOverflow https://stackoverflow.com/questions/608172

  •  03-07-2019
  •  | 
  •  

質問

いくつかの（垂直にスタックされた）display：block要素をdisplay：inline-block要素内に配置しようとしています。 CSS仕様によると、inline-block要素は包含ブロックである必要があります。そのため、その中にdisplay：block要素を含めることができ、それらはレイアウトの他の部分に影響を与えません。

ただし、display：inline-block要素内のdisplay：block要素は、ページの残りの部分を中断します。そのため、インラインブロック内にはまったく何も含まれず、段落のような基本要素さえありません。単純なテキストのみがページの残りの部分の中断を回避します（中断とは、他のdivを下に移動することを意味します。たとえば、この場合、左の赤いブロックが行を下に移動し、その上に空白スペースがあります）。 Firefox 3.0.6を使用しています。

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
}
</style></head><body>
  <div id="left">Left</div><div id="right">Right</div>
</body></html>

上記は、予想どおり、左赤、右緑の2つのペインとして表示されます。 <！> quot; Right <！> quot;を変更した場合

<p>Right</p>

または完全に削除するか、（必要に応じて）いくつかのdivに置き換えて、不適切なフォーマットになります。

これはFirefoxのバグですか、何か間違ったことをしているのですか、それとも私の期待は間違っていますか？ （FWIW、IE 7は、インラインブロックを理解していないかのように、それらすべてを平等に扱います。問題ではありません。これは内部アプリです。Firefoxのみを使用しています）。 float / marginを使用して必要なレイアウトを取得できる場合がありますが、それを行う必要はありません。

役に立ちましたか？

解決

まあ表示：インラインブロックは、クロスブラウザを取得するのが少し難しい場合があります。 Firefox 2の場合、少なくともいくつかのハックと、場合によっては追加の要素が必要になります。

CSS 

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display：-moz-inline-stack はFirefox 2用です。すべての直接の子には、 display：block を持たせるか、ブロックレベルの要素にする必要があります。ラップを縮小するためにinline-block要素が必要な場合は、代わりに display：-moz-inline-box を使用できると思います。

zoom：1 は、要素にhasLayoutを提供します（IE 7以下の場合）。 IE7およびそれ以下の互換性に必要なハックのパート1。

** display：inline *は、IE7以下の互換性に必要なハックの2番目の部分です。

ときどきオーバーフローを追加する必要があります。IEの互換性のために隠されています。

特定の状況で必要なものは次のとおりです：

<html><head><style type="text/css">
#left {
  display: inline-block;
  background: red;
  width: 20%;
  height: 100%;
  vertical-align: top;
}
#right {
  display: inline-block;
  background: green;
  width: 80%;
  height: 100%;
  vertical-align: top;
}
</style></head><body>
  <div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>

他のヒント

  

フォーマットが間違っています。

マージンの折りたたみ、 CSS <！>＃8216; cleverness <！>＃8217;それは恩恵と同じくらい頻繁に痛みです。 <！> lt; p <！> gt;のマージン外側に折りたたまれて、インラインブロックの上部マージンになります。これは、<！>＃8216; inline <！>＃8217;のマージンと同じように動作します。要素は、テキスト行の垂直方向の配置を押し出します。

<！>＃8216; p <！>＃8217;からマージンを削除することで、それを止めることができます。要素とパディングを代わりに使用します。または、ブロックの上部に上余白のない空でない要素を配置し、下部に下部余白のない要素を配置します。

  

これはFirefoxのバグですか

仕様によると、おそらくそうだと思います：

  

インラインブロック要素のマージンは折りたたまれません（インフローの子であっても）。

インラインブロック     この値により、要素はインラインレベルのブロックコンテナを生成します。インラインブロックの内部はブロックボックスとしてフォーマットされ、要素自体はアトミックインラインレベルボックスとしてフォーマットされます。 視覚レンダリングモデル

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top