0

HTML

<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>​

CSS

.size {
    background-color: red;
    height: 100px;
    width: 100px;
}
#size2 {
    width: 200px;
}
.cont {
    padding: 10px;
    float: left;
}​

div.contの幅が含まれている幅である必要がありますdiv.size（私の実際の例div.sizeでは画像であり、その幅はインスタンスごとに異なります）。

div.textコンテナよりも多くのスペースを占有するため、これは発生していません。これを停止してテキストを折り返すにはどうすればよいですか?

JSフィドル

4

3 に答える 3

3

（いくつか掘り下げた後）作業ソリューションとの正確な重複を見つけたので、以前のものをすべて削除しました。

私の答えも間違っていました（opが指定したため、画像を可変にする必要があります）

答えはこのjsfiddleにあり、cssの正確な複製です-親divを縮小して1つの子の幅に合わせ、他の子の幅を制限します

//html

<div id="container">
    <div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
    <div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>

//css

#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}

基本的には display:table-* を使用して動作します（よく読んでください）

于 2012-12-08T17:28:26.903 に答える
0

ポール・サリバンのアプローチを拡張すると、

あなたのCSSで：

.size {
  ...

    display:block; /*assuming its an image - making sure its block level*/

  ...
}

.cont {
  ...

    position:relative; /*add this to parent container if comming from cms*/

  ...
}

.text {
  ...

    position:absolute;
    top:100%; /*just to make sure content doesnt overlaps image*/

  ...
}

コンテンツを画像と同じ幅に伸ばすためのプラスポイントを与えるだけです（さらにパディング）

それが役に立てば幸い、

フィドル: http://jsfiddle.net/BKRsT/3/

于 2012-12-09T23:58:38.150 に答える
0

'.size{ float:left;}'

これが役立つかどうか教えてください。

于 2012-12-08T18:21:52.110 に答える