html - 高度为 :auto for content with variable height? 的问题(jsFiddle)

Question

对于下面的 HTML，我希望容器包装 section+content+element(s)，并且我希望 element2 是 element1 的直接(float:left？)延续。

<div class="page">
    <div class="container">
        <div class="section">
        <div class="content">
          <div class="element1">Elements Goes Here And Here And Here And Here .. more elements hereafter</div>
        </div>
      </div>        
        <div class="section">
        <div class="content">
          <div class="element1">Elements Goes Here And Here And Here And Here</div>
          <div class="element2">more elements hereafter</div>
        </div>
      </div>
    </div>
</div>

尽管此 CSS 无法正常工作 http://jsfiddle.net/sLnY5/3/ :

.container {
    width: 100%;
    min-height: 74px;
    height: auto;
  border: 1px solid rgba(142, 142, 142, 1);
}
.section {
    width: 100%;
    min-height: 37px;
    height: auto;
  border: 1px solid rgba(142, 142, 142, 1);
        background-color: blue;
}
.content {
    float: left;
    min-height: 37px;
    height: auto;
    width: 100%;
    line-height: 1.42;
    padding: 2%;
  border: 1px solid rgba(142, 142, 142, 1);
}
.element1 {
    float: left;
    font-size: 12.9px;
    padding-top: 2px;
    letter-spacing: 0.07em;
    background-color: green;
}
.element2 {
    float: left;
    padding-left: 3px;
    background-color: purple;
}
.page {
  width: 50%;
  height: auto;
  margin: 0 auto;
  padding-top: 5%;
}

Answer 1

我想不出您想要使用 float: left; 和 width: 100%; 的场景。根据我的经验，float 被过度使用并且在很大程度上被误解了。我不确定“element1 的直接延续”是什么意思，但听起来您可能想要 display: inline;。

jsfiddle.net/sLnY5/4