0

以前のスレッドに基づいて、overflow 要素を使用して 2 つの div を水平方向に配置する推奨方法を使用して理解しようとしています。

私の短いテキストでは 2 つの div が正しく配置されていますが、孤独なテキストを追加すると画像の下に落ちてしまいます。なぜこれが起こっているのか、どうすれば修正できるのか、誰でも説明できますか?

私のJSFIDDLE

HTML:

<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
    <img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
    <div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>

CSS:

div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}

div.left {
padding:5px;
float: left;
}

div.right { 
float: left;
}

.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
4

5 に答える 5

0

max-width 属性を設定して、使用可能なスペースをできるだけ多く使用するテキストフォームを制限し、次の行に最大のスペースを確保する必要があります。

http://jsfiddle.net/a6BbD/1/

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here   Some long text here Some long text here Some long text here </div>
    </div>
</div>

<br>

<div class="container" style="overflow: hidden; width: 100%">
    <div class="left">
        <img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
    </div>
    <div class="right">
    <div style="word-wrap: break-word;">Some short text here</div>
    </div>
</div>
于 2013-04-15T16:02:30.597 に答える
0

float:left;ルールの を削除すると機能します。ただし、6+ などで改善してテストすることもできます。

于 2013-04-15T16:04:55.943 に答える
0

推奨事項では、浮動要素には常に幅を設定する必要があります。以下のリンクには、フロートを理解するための優れた資料があります..

      http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
于 2013-04-15T16:33:54.943 に答える