html - 将 与左浮动 div 一起使用会导致第二个 div 低于第一个 div

Question

https://jsfiddle.net/9nh220q2/1/

基本上，我有这样的东西:

  <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

.right 的计算宽度

.right {
宽度:计算(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>