Question

基本上，我有类似的东西：

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

但是，这些项目位于滚动面板内。因此，在jsFiddle中，我将这些放在宽度为600px的父div中。如您所见，<div class="right">正在下方。我怎么能阻止它呢？

Answer 1

您可以删除所有float并使用flexbox来解决此问题。 Flexbox是一种处理这种布局的强大现代方法。 flexboxfroggy是了解它们的好方法。

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

Demo

更好的方法是使用标准css网格，但we should wait a bit more。

编辑：

所有现代浏览器支持flexbox。对于旧版本，如果必须，可以使用polyfill。

Answer 2

.right的计算宽度

.right { width: calc(100% - 120px); }

.container {
  background-color: #fff;
  padding: 20px 20px 10px 20px;
  overflow: hidden;
  border-bottom: 1px solid lightgray;
  margin: 0;
}

.left {
  width: 100px;
  float: left;
  margin: 0;
  text-align: center;
}

.image {
  height: 100px;
  width: 100px;
  border-radius: 4px;
  margin-bottom: 5px;
}

.right {
  float: left;
  padding-left: 20px;
  width: calc(100% - 100px - 20px);  /* all width - size of image - padding) */
}

h3 {
  margin: 0;
}

<div style="width: 600px">
  <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>
  <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>
  <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>
</div>

Answer 3

您需要将width的{{1}}设置为最大.right。 See the working fiddle。

<强>解释

您的容器440px的{{1}} div。要使其中包含的元素正确排列，其width必须加起来为600px的最大。

您的width已占用600px。这意味着您的img最多可以100px div.right。（因为width）

但是，如果您将其设置为500px，则很可能会发现问题无法解决。发生这种情况的原因是，默认情况下，大多数（，如果不是全部）浏览器使用600px - 100px = 500px模型呈现页面，包括 500px和{{ 1}}在计算content-box s时的元素。

在您的情况下，您的padding包含margin width双方div。此外，您的20px左侧有padding div.right个20px。这最多为padding，您需要从我们上面计算的可用空间60px中减去500px。这样您就可以使用440px了，如果将其设置为width的{{1}}，您会发现这些元素完美排列！

您还可以更改浏览器查看邮箱模型的默认方式，方法是将div.right的值从box-sizing更改为content-box（border-box和{{padding 1}}不在margin）或width中计算（padding-box中未计算padding），然后调整width，{{1}或相应的padding值。

使用带有左浮动div的<p>会导致第二个div低于第一个div

3 个答案: