2

おそらく簡単な質問があります。

内部にブロック要素がある浮動要素があります。

ブロック要素内にテキストを追加すると、ブロック要素が水平方向に展開され、親フロートも展開されます (想定どおり)。

内側のブロック要素に幅を追加すると、テキストが折り返され、ブロック要素がその幅になります。

ただし、フロート要素は、幅が設定されていないブロック要素と同じ幅のままであり、ブロック要素の設定幅まで縮小すると予想されます。

テキストに見えない幅がありますか?

これは、私が話していることを示す非常に単純なフィドルです。

http://jsfiddle.net/bup88/

.thumbs li
{
   float:left;
  border:solid 1px black;
}
.thumbs div
{
  width:20%;
  border:solid 1px red;
}



<ul class="thumbs">
  <li>
 <img src="http://placehold.it/250X250" /> 
  <div>
    some text some text some text some text some text some textsome text some text
  </div>
</li>
</ul>

フロート要素が幅ルールなしでブロック要素と同じ幅のままなのはなぜですか?

4

4 に答える 4

2

width:20%; を設定します。親が参照用の幅を持たないブロックに。

私が奇妙だと思うのは、フローティングであるため、div自体の平均サイズでブラウザのサイズが何らかの形<li>でこの20％をまだ取得していることです。<li>したがって、最終的に、div はそのコンテンツの 100% を取り、それ自体の幅の 20% にサイズ変更します。

<li>CSS に幅がある場合は、必要に応じて折り返されます。

div に % 値以外の値がある場合、それは折り返されます

それはあなたのCSSがどういうわけか首尾一貫していない原因となります:)

http://jsfiddle.net/bup88/4/

于 2013-06-21T16:58:14.577 に答える
2

私は CSS の専門家ではないので、以下の仮定が正しくない場合は、誰かに知らせてください。

ブロック要素でパーセンテージを使用しているためだと思います。widthこれは、最終的な幅を計算するためにパーセンテージで使用する必要がある幅の値について、親要素 (浮動要素) を調べます。

このパーセンテージ幅を把握するために、レイアウト エンジンはまず、パーセンテージ ルールがない場合のブロック要素の幅を計算し、次に、パーセンテージ ルールが存在しない場合と同様に、フロートされた親要素をその幅に設定していると思います。 . フロート要素の幅が定義されたので、子ブロック要素の幅のパーセンテージを計算できます。ただし、この計算は、フローティングされた親要素の幅には影響しません。これは、既にレイアウトされているためです。

幅を のような明確なものに設定するpxか、レイアウト タイプをブロックからインラインに変更すると (j08691 が提案するように)、期待どおりに動作します。

于 2013-06-21T16:59:44.707 に答える
1

より良いオプションは、 this の子要素で inline-block を使用することですthumbs。これにより、必要に応じてテキストがスペースを大きくまたは小さく埋めることができます。幅を削除すると、残りのスペースがいっぱいになります。

.thumbs img {
  display: inline-block;
  vertical-align: top;
  zoom: 1;
}
.thumbs div
{
  display: inline-block;
  vertical-align: top;
  width:20%;
  border:solid 1px red;
  zoom: 1;
}
于 2013-06-21T17:06:16.563 に答える
1

その方法を変更します。

.thumbs div{
  float:right;/* UPDATE WITH */
  width:20%;/* CHANGE WITH THE SIZE THAT YOU WANT FOR THE DIV */
  border:solid 1px red;
}
.thums img{
  float:left;
}

すべてが水平に収まります。

于 2013-06-21T16:51:53.420 に答える