html - 当内容太宽时如何阻止 DIV 掉到下一行

Question

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

请看下图。带问号的高度未知，因为它们可能会随着内容的增加而扩展。如果标题确实扩展到多行，则图像应保持垂直居中对齐。

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

我尝试过使用 float，但是，这并没有产生预期的结果。

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

问题是您将产品框的高度强制设置为 50 像素。删除该行并添加 line-height:1em;到您的产品盒内容。最后，在您的 productbox-content 类上使用 max-width。

http://jsfiddle.net/b359Lh6g/

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