html - テキストコンテンツをラップする要素をブロックする方法は?

Question

div左に揃えて垂直に配置したい2つのsがあり、テキストの量に基づいて幅を折り返す必要があります。

.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

score 2 · Accepted Answer

私が理解しているように、それはあなたが望んでいることかもしれません。

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

これをチェックしてくださいhttp://jsfiddle.net/2kmzK/1/

1 に答える 1