0

テキストのブロックの左側に画像を浮かせて、2 つの間にわずかなギャップを維持しようとしていますが、テキストが画像の下に蛇行するのは望ましくありません。これは私が欲しいものです:

------- ------------
| pic | |   text   |
------- |          |
        |          |
        |          |
        ------------

すべての要素の幅とサイズが px で定義されている場合、これは簡単ですが、% 定義されています。

<div id="container">
  <div class="theimage"><img src=img.jpg"></div>
  <div class="thetext">blah blah</div>
</div>

#container {width: 95%; overflow: auto}
.theimage {float: left; width: 20%}
.theimage img {width: 100%}
.thetext {float: left; width: 80%}

上記は正常に動作します。ただし、次に追加padding-right: 10pxしtheimageて画像とテキストの間にギャップを作成すると、横に浮くのではなくthetext下に落ちます。theimage

と の間にギャップを作るのに何か助けはtheimageありthetextますか?

4

2 に答える 2

2

プロパティを使用してみてくださいbox-sizing: border-box。通常のcontent-boxモデルでは、要素のパディングは高さの計算に含まれないため、画像の 20% に 10px を追加しているため、画像とテキストの合計は 20% + 10px + 100% になり、これはもちろん、親の幅を超えています。

実際、Paul Irish は、CSS ルールを使用することを推奨して* { box-sizing: border-box; }います。これは、サイズを計算する手間を大幅に省き、ブラウザのパフォーマンスやページ レンダリングに与える影響が小さいためです。

于 2013-03-16T15:51:08.773 に答える
1

box-sizing: border-boxパディングを追加する要素で使用します。これにより、パディングが幅計算の一部になります。

http://jsfiddle.net/ExplosionPIlls/jqjqd/1/

代替ソリューション:

代わりに使用float: leftしdisplay: inline-block、white-space: nowrapコンテナに使用します。これにより、要素が 1 行に収まるようになります。

また、個々の要素を設定white-space: normalしvertical-align: topて、コンテンツとともに成長し、上部に配置できるようにする必要があります。すべて一緒に:

#container {
    width: 95%;
    overflow: auto;
    height: 50px;
    white-space: nowrap;
}
.theimage {
    display: inline-block;
    width: 20%;
    padding-right: 10px;
    white-space: normal;
    vertical-align: top;
}   
.thetext {
    display: inline-block;
    width: 80%;
    white-space: normal;
    vertical-align: top;
}

これにより、水平スクロールバーがオンになり#containerます (同様に、パディングによりコンテンツの合計幅が 100% を超えるため)。

http://jsfiddle.net/ExplosionPIlls/jqjqd/

于 2013-03-16T15:51:30.237 に答える