Question

我有一个具有一定大小的div，它有图像和两个段落。

所有这些都将浮动设置为左

＆＃13;

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

＆＃13;

<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>

＆＃13;

Demo

我想要达到的目的是让段落在彼此之下，同时仍然保持浮动或与浮动相同的结果，是否可能？如果是这样，我怎么能这样做？

Answer 1

jsFiddle Example

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以浮动两个父容器。对于段落，你不需要浮动它们！

希望它会给你一些想法

Answer 2

如果您希望图片和段落逐个堆叠在一起，请从float:left; .one和.two中删除CSS img。 DIV标签是块元素，自然会向下流动。你漂浮它们会导致它们并排显示。

或

如果我可能误解了这个问题并且您想要类似下面的代码，那么将一个和两个放在div中并从中删除float。因此，当您将它们放入div中时，它们会获得div的自然流动，即display:block;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

将clear: left分配给.one和.two：

＆＃13;

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

＆＃13;

<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>

＆＃13;

浮动段落

3 个答案: