高度問題：高度可變的內容自動？ （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