2

デフォルトでは、ブロック レベル要素は、コンテンツがなくても 100% の幅を持ち、親要素の水平方向のスペースを占有します。

一方、インライン要素は、コンテンツに応じて幅を調整します。コンテンツが長い場合、要素は幅が広くなり、コンテンツが短い場合は幅が縮小します。

ここに画像の説明を入力

ここにデモがあります。

ここで達成したいのは、インライン要素のようなコンテンツに応じて調整される幅を持つブロック レベル要素を作成することです。どうすればいいですか？

ノート：

  • ブロック要素をインラインブロックやインラインではなく、ブロックにしたい。
  • フロートを避けたいのですが、フローティング要素がなくても実現できると思います。
4

4 に答える 4

2

テーブルの幅はまさに私が模倣しようとしているものであることを思い出しました。コンテンツの長さに応じて調整します。HTML 4 のデフォルトのスタイルシートを見つけました。テーブルの表示プロパティが「table」に設定されているので、それを div にしてみました。

div{ display:table; background:yellow; }

<div>lorem ipsum dolor</div>

デモ

于 2012-10-09T07:55:12.467 に答える
1

さて、私はあなたがあなたのメインのdivのdisplay: inline-block 内側にdivまたはspanを追加することをお勧めしますdisplay: block。次に、javascriptを使用して内部要素のサイズを計算します。次に、親要素の幅を同じ値に設定します。

とにかく、あなたの要件は非常に奇妙です

于 2012-10-09T07:21:00.387 に答える
1

このようにブロック要素を左にフロートさせることができます

CSS

div { background:yellow; float: left;}

私のフィドル

後で要素を単純に分割するか<div style="clear: both;"></div>、フローティング div の後に使用できます...

私のフィドル

于 2012-10-09T07:16:37.610 に答える
0

私はあなたのためにlittelサンプルを与えます

  • HTML
lorem ipsum dolor
lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorloremipsumdolorより長く

  • CSS

    div { background:yellow; }
span { background:orange; float:left;display:inline; width:auto;padding:0 3px; border-right:1px solid red;}

要素のスパンは左にフロートし、幅はコンテンツによって異なります。

于 2012-10-09T07:21:42.490 に答える