如何向左浮動而不打包到下一行？

Question

所以我試圖將我的section移動到相同的一行，而不是將它堆疊在一起並轉到下一行。我怎樣才能做到這一點？

這裏是我的代碼：

<section> 

    <img src="http://www.w3newbie.com/wp-content/uploads/trainers.png"</> 
    <h1>Stay Connected!</h1> 
    <p>Random Text just to fill space.</p> 

    <img src="http://www.w3newbie.com/wp-content/uploads/location.png"</> 
    <h1>Oh New Jersey...</h1> 
    <p>Based in New Jersey I couldn't be happier where I am today...</p> 

    <img src="http://www.w3newbie.com/wp-content/uploads/check.png"</> 
    <h1>Keep Updated!</h1> 
    <p>Subscriber Count: 2,458<br> Twitter Followers: 869<br>Instagram</p>   

</section> 

，這裏是我的CSS吧：

section{ 
    width: 29%; 
    float: left; 
    text-align: center; 
} 

Answer 1

最好不要將所有這些元素在一個section元素，包裝每個模塊中的section。然後你的CSS將工作。

<section> 
    <img src="http://www.w3newbie.com/wp-content/uploads/trainers.png" /> 
    <h1>Stay Connected!</h1> 
    <p>Random Text just to fill space.</p> 
</section> 

<section> 
    <img src="http://www.w3newbie.com/wp-content/uploads/location.png" /> 
    <h1>Oh New Jersey...</h1> 
    <p>Based in New Jersey I couldn't be happier where I am today...</p> 
</section> 

<section> 
    <img src="http://www.w3newbie.com/wp-content/uploads/check.png" /> 
    <h1>Keep Updated!</h1> 
    <p>Subscriber Count: 2,458 
     <br> Twitter Followers: 869 
     <br>Instagram</p> 
</section> 

DEMO

此外，需要在每個<img>標籤的端部的校正。您的自閉標籤無效（</>）。