フローティング段落

Question

私は特定のサイズのdivを持っており、イメージと2つの段落があります。まだフロートを持ちながら

それらのすべては、私が達成したい何

div { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
img { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.one { 
 
    float: left; 
 
} 
 
.two { 
 
    float: left; 
 
}

<div> 
 
    <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt=""> 
 
    <p class="one">one</p> 
 
    <p class="two">two</p> 
 
</div>

Demo

左にフロートを設定している、パラグラフはそれぞれ、他の下に持っていることですfloatと同じ結果を残しているか、可能か？もしそうなら、どうすれば実現できますか？

Answer 1

jsFiddle Example

div { 
 
    width: 115px; 
 
    float: left; 
 
} 
 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div> 
 
    <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt=""> 
 
</div> 
 
<div> 
 
    <p>one</p> 
 
    <p>two</p> 
 
</div>

あなたは、2個の親コンテナを浮くことができます。段落については、それらを浮かせる必要はありません！

は、それはあなたがイメージや段落が1で互いに1の下にスタックしたい場合は、.one.twoとimgからCSS float:left;を削除し、あなたにいくつかのアイデア

Answer 2

を与えることを願っています。 DIVタグはブロック要素であり、自然にページを流れます。あなたはそれらを浮遊させて、それらを並べて表示させるでしょう。

または私は質問を誤解している可能性があり、あなたはコードの下のようなものが、その後のdivの内側に1と2を入れて、そこからフロートを削除したい場合は

。ですから、彼らはdiv要素すなわち.oneと.twoからdisplay:block;

div{ 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
img{ 
 
    float:left; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.para{ 
 
    
 
} 
 
.one{ 
 
} 
 
.two{ 
 
}

<div> 
 
<img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt=""> 
 
<div class="para"> 
 

 

 
    <p class="one">one</p> 
 
    <p class="two">two</p> 
 
    </div>d 
 
</div>

Answer 3

割り当てclear: leftの自然な流れを得るのdiv内に置くとき：

div { 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 
img { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.one { 
 
    float: left; 
 
    clear: left; 
 
} 
 
.two { 
 
    float: left; 
 
    clear: left; 
 
}

<div> 
 
    <img src="http://img.timeinc.net/time/daily/2010/1001/360_br10q_0208.jpg" alt=""> 
 
    <p class="one">one</p> 
 
    <p class="two">two</p> 
 
</div>