高度问题：自动调整高度可变的内容？ （的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被过度使用并且在很大程度上被误解了。我不确定你的意思是＆＃34; element1＆＃34;的直接延续，但听起来你可能想要display: inline;。

jsfiddle.net/sLnY5/4