html - 如何阻止元素包裹在文本内容上？

Question

我有 2 个 div，我想将它们垂直放置并向左对齐，并且我希望它们的宽度根据文本量换行。

fiddle

.main {
  position: absolute;
  color: white;
}

.line {
  padding: 3px;
  margin: 2px;
  background-color: #505050;
}

<div class="main">
  <div class="line">Content content content content</div>
  <div class="line">Content content</div>
</div>

我问是否有更直接的解决方案的原因是因为我认为 width: 0 和 white-space: nowrap 可能会影响不同的内容。

Answer 1

据我了解，这可能就是您想要的。

.main {
    color: white;
}
.line {
    padding: 3px;
    margin: 2px;
    background-color: #505050;
    float:left;
    clear:left;
}

检查这个http://jsfiddle.net/2kmzK/1/