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>标记的末尾都需要进行更正。您的自动关闭代码无效（</>）。

如何在没有包装到下一行的情况下向左浮动？

1 个答案: