css - float 段落

Question

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

都设置了向左浮动

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 或达到与 float 相同的结果，这可能吗？如果是这样，我怎样才能做到这一点？

Answer 1

如果您希望图像和段落一个接一个地堆叠在彼此下方，请从 .one .two 中删除 CSS float:left; > 和 img。 DIV 标签是 block 元素，自然会顺着页面向下流动。您正在 float 它们，这会导致它们并排显示。

或者

如果我可能误解了这个问题，而你想要类似下面的代码，那么将 1 和 2 放在一个 div 中并从中删除 float。因此，当您将它们放在一个 div 中时，它们会自然地流动 div，即 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>