4

次の HTML コードがあります。 

<div style="width:100%">
    <div id="div1" style="float:left">
        <img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg">
    </div>
    <div id="div2" style="float:left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae libero lectus, varius placerat risus. Pellentesque condimentum dapibus fermentum. Nam eget magna nisl, a iaculis massa. Sed congue ultrices felis sed volutpat. Donec tristique ullamcorper ullamcorper. </p>
    </div>
</div>

ここに例があります。

したがって、div1 と div2 の 2 つの div があります。

問題は、段落が長すぎるため、div が押し下げられていることです。通常の画面で div2 を div1 の隣に配置したい (画面サイズが十分に大きい場合)。画面が小さすぎる場合 (携帯電話など)、div2 は次の行に移動する必要があります。

段落の幅がその親 div の幅に制限されている可能性はないので、div2 はまだ div1 の隣にありますか?

ところで、divの（最大）幅を設定したくありません...

どうもありがとう！！

ワンネス

4

5 に答える 5

2

幅をdiv1に設定すると、pがそれを採用します。div2にも幅が必要です。

<style>
#mainContainer {
    width: 100%;
}
#div1, #div2 {
    float: left;
    width: 45%;
    min-width: 300px;
}
</style>

あなたが望むことを達成するために、あなたは最小幅を使う必要があります。JsFiddleを確認し、中央の境界線をドラッグして効果を確認してください。これは@SergiyTのアドバイスによるものです。そうでない場合は、実際にスクリプトを使用する必要があります。

于 2013-02-12T10:43:42.510 に答える
0

左フロートを使用して、2番目のdiv内に画像を配置します。

于 2013-02-12T10:42:45.417 に答える
0

div1に、 width = 300pxとmargin-right：10pxを修正します。float：leftをdiv2に削除します。

于 2013-02-12T10:38:48.147 に答える
0

div1 と div2 を にfloat:left置き換える ことができますdisplay:table-cell; vertical-align:top

編集: 次のコードで必要なものをほぼ達成できました。

<div style="width:100%;">
<div style="float:left;">
    <img src="http://www.lappelducourty.be/test/wp-content/uploads/2013/01/siesta-300x225.jpg" />
</div>
<p>test</p>
<div style="display:table;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] Sed in quam dolor. </p>
</div>

トリッキーな部分は<p>test</p>. ウィンドウのサイズが変更されたときに、段落がない場合、または空の 1 つのテキストがある場合、画像の下部に移動しません。それをテストしていなくても、どのブロック要素でも機能すると思います。それでも、なぜそれが起こるのかわかりません。

于 2013-02-12T10:06:13.270 に答える
0

float:left私が正しいと理解したら、 を削除したいと思いますdiv2。

于 2013-02-12T10:05:43.343 に答える