高度问题：高度可变的内容自动？ （jsFiddle）

Question

对于以下HTML，我希望容器包含section + content +元素，并且我希望element2是元素1的直接（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