html - 无法弄清楚与 clear 属性有关的一点 css

Question

我正在练习网页设计，并且在 url www.bigchip.co.nf 上有一个网页，但我不明白为什么我无法让显示更改日期的按钮下拉到图片和小描述下方。我想得很清楚:就在筹码的图像上会使按钮下拉到新的一行。这样做的正确方法是将它们放入 div 中以将它们分开吗？

Answer 1

查看您的页面后，我注意到图像没有 float ，这导致 clear: right on it 不起作用。您可以做的是在图像元素后添加一个 br 标签以推送更改日期按钮到元素的底部。

<div id="container">
    <h1 id="header">BigChip.com</h1>

    <ul id="nav">
        <li class="li1"><a href="home.html">Home</a></li>
        <li class="li2"><a href="gallery.html">Gallery</a></li>
        <li class="li3"><a href="funny_chips.html">Funny Chips</a></li>
        <li class="li4"><a href="sign_in.html">Sign In</a></li>
    </ul>

    <p id="description">
        Welcome to BigChip.com! The site with the biggest chips on the web. Get involved by uploading your own chips or browse through our gallery where your find all the chips uploaded by other users.
    </p>

    <h2 id="biggest_chip">Today's Biggest Chips!</h2>

    <img id="chipsimg" src="images/chips.jpg">
    <br />
    <button id="button" type="button" onclick="change_date()">Change Date</button>

</div>