Html 使用<；p>；左浮动div导致第二个div低于第一个div

基本上，我有这样的想法：

  <div class="container">
    <div class="left">
      <img src="http://i.imgur.com/bWQUX0O.jpg" class="image" />
      <span>0.3 mi</span>
    </div>
    <div class="right">
      <h3>TITLE HERE</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec turpis eu mi nullam sodales.</p>
    </div>
  </div>

0.3英里
标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭nec turpis eu mi nullam sodales

---

但是，这些项目位于滚动面板内。因此，在JSFIDLE中，我将它们放在一个宽度为600px的父div中。如您所见，下面是

。如何阻止它这样做？

您可以通过删除所有的

浮动

并使用

flexbox

来解决此问题。Flexbox是处理此类布局的强大现代方法。这是了解他们的好方法

.container {
  display: flex;
  justify-content:space-between;
}

更好的方法是使用标准css网格，但是

编辑：

---

所有现代浏览器都支持。对于旧的，如果需要，可以使用多边形填充。

计算宽度。对吗

。对{
宽度：计算（100%-120px）；
}

.container{
背景色：#fff；
填充：20px 20px 10px 20px；
溢出：隐藏；
边框底部：1px实心浅灰色；
保证金：0；
}
.左{
宽度：100px；
浮动：左；
保证金：0；
文本对齐：居中；
}
.形象{
高度：100px；
宽度：100px；
边界半径：4px；
边缘底部：5px；
}
.对{
浮动：左；
左侧填充：20px；
宽度：计算（100%-100px-20px）；/*所有宽度-图像大小-填充）*/
}
h3{
保证金：0；
}

0.3英里
标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭nec turpis eu mi nullam sodales

0.3英里
标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭nec turpis eu mi nullam sodales

0.3英里
标题在这里
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭nec turpis eu mi nullam sodales

您需要将

.right

的

宽度设置为最大值
440px

说明：

您的容器
div
的
宽度
为
600px
。为了使包含在中的元素正确对齐，它们的
宽度
s必须加起来达到
600px的最大值

您的
img
已经占用了
100px
。这意味着您的
div.right
的最大
宽度可以为
500px
。（因为
600px-100px=500px
）

但是，如果将其设置为
500px
，则很可能会注意到问题无法解决。这是因为默认情况下，大多数（如果不是所有）浏览器使用
内容框
模型呈现页面，该模型在计算元素的
宽度时，包含
填充
和
边距
s

在您的例子中，您的containing
div
在两侧都有
20px
的
padding
。此外，您的
div.right
在左侧有
padding
的
20px
。这总共是
60px
，您需要从上面计算的可用空间中减去
500px
。这就给您留下了
440px
，如果您将其设置为
div.right
的
width
，您将注意到元素完美地排列在一起

您还可以通过将
框大小
的值从
内容框
更改为
边框框
（在
宽度
中既不计算
填充
也不计算
边距
）或更改为
填充框
（
填充
未在
宽度
中计算）然后相应地调整
padding
，
border
或
width
值。
你也必须给你的右div一个宽度。通常从容器的宽度计算它，减去左div宽度和padding。请看这里-我真的认为没有必要链接。事实上，asker甚至可能会找到它赞助人。好的，我删除了它。谢谢你的评论。我添加它是因为我之前回答了一个问题，提问者承认我已经解决了他们的问题，但没有将我的回答标记为接受。这么说，你认为当提问者缺乏经验时将其包括在内是一种好的做法吗？我在这里读了一些关于这一点和g的帖子一般共识是积极的。永远不要将其包含在答案的正文中。你可以在评论中提示新用户，作为对他们说谢谢的回应，但要确保他们确实是新的-否则你的评论可能会误导他人。好的，再次感谢。我确实将其包含在其他答案的评论中，但没有用。谢谢。是flexbo吗在更多浏览器中支持x？我知道我在某个地方读到它会导致IE出现问题。@user1354934我在答案中添加了一个caniuse链接。