如果内容太宽，如何阻止DIV下降到下一行

Question

我有将扩展div包装到下一行的问题。基本上我有一个重复的DIV，它是在运行中生成的。 Div包含产品图像，数量，标题和价格。问题是标题可以是不同的长度，因此标题div必须能够扩展到多行，而其他div应该能够重新排列以匹配。该页面必须在小屏幕上工作。

请参阅下图。带有问号的高度未知，因为它们可能随内容扩展。如果标题确实扩展到多行，则图像应保持垂直对齐在中心。

我添加了 jsfiddle ，其中1个标题太长，需要展开。你可以看到它被推到了DIV下方。我尝试在包含扩展文本的div中添加max-width: 150px;，但是，当它扩展为多行时，它会将价格字段从底部推出，因此无法看到。

我尝试过使用浮点数，然而，这并没有产生预期的结果。

body {
  width: 300px;
}
.productbox {
  height: 50px;
  color: #555;
  background-color: #FFF;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 3px 6px 9px;
  vertical-align: middle;
  text-align: left;
  position: relative;
  margin-right: 20px;
  margin-top: 20px;
}
.productbox>.productbox-icon {
  border-radius: 50%;
  margin: auto;
  display: inline-block;
  vertical-align: top;
}
.productbox>.productbox-data {
  display: inline-block;
  border-width: 0;
  border-top-width: 0;
  font-size: 13px;
  text-align: left;
  line-height: 21px;
  min-width: 130px;
  padding-left: 8px;
  position: relative;
  top: 0;
}
.productbox>.productbox-data>.productbox-data-number {
  display: block;
  font-size: 22px;
  margin: 2px 0 4px;
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
}
.productbox .productbox-content {
  color: #7B7A7A;
  /*
				max-width: 150px;
			*/
  font-size: 10px;
}
.nailthumb-image {
  border-radius: 50px;
}

<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="http://www.toeflgoanywhere.org/sites/default/files/styles/original/public/carousel/thumbs/basic-thumb2-hover.png?itok=f-yHa-XL">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">Short amount of text.</div>
    <div class="value">£9.99</div>
  </div>
</div>
<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="https://discourse-cdn.global.ssl.fastly.net/meteor/images/emoji/emoji_one/smile.png?v=0">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">The text in this box is too long to fit here. Don't you think?</div>
    <div class="value">£9.99</div>
  </div>
</div>
<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="http://images.ddccdn.com/answers/library/img/avatar/40-m.png">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">Another short amount of text</div>
    <div class="value">£9.99</div>
  </div>
</div>

如果你能提供帮助，请告诉我。

由于

Answer 1

问题在于您强制将产品箱的高度设置为50px。删除该行并添加行高：1em;到您的productbox内容。最后，在productbox-content类上使用max-width。

http://jsfiddle.net/b359Lh6g/

.productbox-content{
    line-height:1em;
    max-width:150px;
}

Answer 2

如果将word-wrap: break-word与max-width属性结合使用，这将允许文本换行而不是在图像下方推送。

我还添加了line-height:以使其余部分合适。无论如何，空间都将成为一个问题，但这应该让它适合你。如果绝对必要，您可以为其添加overflow: scroll。

https://jsfiddle.net/rLtf3je3/10/

编辑：在我链接之前忘了保存JSFiddle：）

根据Cruiser的回答，word-wrap并没有真正做任何事情 - 在这种情况下设置行高似乎就足够了。