0

我无法弄清楚为什么任何对象都不会直接进入 3 个 div 之下。

这是HTML

<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>The Trek</title>
</head><body>
<div id="wrap">
<div id="main">
    <div id="bucket"><img src="img/golf.png" width="100%"><div id="button">Text</div></div>
    <div id="bucket"><img src="img/4wd.png" width="100%"><div id="button">Text</div></div>
    <div id="bucket"><img src="img/mara.png" width="100%"><div id="button">Text</div></div>
    <p>Text</p>
</div>
</div>
</div>
</body>
</html>

这是CSS

*{padding:0px;margin:0px;font-family:geneva;}
body{background-image:url(img/bg.png);background-repeat:repeat;}
#wrap{padding:50px;}
#main{margin:auto;padding:40px; width:900px;height:850px; position:relative;}
#bucket{width:30.2%;float:left; margin-right:40px;height:auto;display:block;}
#main div:last-child{margin-right:0px;}
#button {float:left;width:100%;height:auto;text-decoration:none;text-align:center;color:#eee;width:96.5%;height:100%; background:#633;text-decoration:none; padding:5px; font-size:20px;}

任何帮助将不胜感激！

4

3 回答 3

1

首先，您对多个元素使用相同的 ID...将其更改为一个类。ID 必须始终是唯一的。

清除浮动是一种方法，但我不喜欢它，因为它稍后会变得有点混乱。

我的建议是将您的“桶”元素包装到一个 div 中。这将解决您的问题。

例子

HTML

<div id="wrap">
    <div id="main">
        <div id="buckets">
            <div class="bucket">
                <img src="img/golf.png" width="100%" />
                <div class="button">Text</div>
            </div>
            <div class="bucket">
                <img src="img/4wd.png" width="100%" />
                <div class="button">Text</div>
            </div>
            <div class="bucket">
                <img src="img/mara.png" width="100%" />
                <div class="button">Text</div>
            </div>
        </div>
        <p>Text</p>
    </div>
</div>

CSS

* {
    padding:0px;
    margin:0px;
    font-family:geneva;
}
body {
    background-image:url(img/bg.png);
    background-repeat:repeat;
}
#wrap {
    padding:50px;
}
#main {
    margin:auto;
    padding:40px;
    width:900px;
    height:850px;
    position:relative;
}
.bucket {
    width:30.2%;
    float:left;
    margin-right:40px;
    height:auto;
    display:block;
}
#main div:last-child {
    margin-right:0px;
}
.button {
    float:left;
    width:100%;
    height:auto;
    text-decoration:none;
    text-align:center;
    color:#eee;
    width:96.5%;
    height:100%;
    background:#633;
    text-decoration:none;
    padding:5px;
    font-size:20px;
}

希望这可以帮助

于 2013-08-26T02:35:15.667 回答
0

这是因为你没有清除左浮动。有几种方法可以实现这一点，例如：

#main p {
    clear: both;
}

这将防止浮动元素在元素的所有p标签的左侧或右侧#main。

于 2013-08-26T02:25:53.923 回答
0

因此，我将首先对您的代码提出一些建议，id=""仅用于仅使用一次的元素，通常您不使用它们，而是使用class=""可以在页面上根据需要多次使用的元素，您可以通过.而不是#在您的CSS. 您的<p>元素放在旁边的原因是因为 3 旁边有空间放置它<div>。显然，对此的快速修复可能就像@plalx所说的使用clear: both;属性一样，但这只是掩盖了您的错误，并没有真正修复它。你也可以使用display: block你想要在下面的任何元素。要真正解决此问题，您需要使用 3<div>填充它的容器的宽度。我已经清理了您的代码，如果您有任何问题，请告诉我，祝您好运！

例子

HTML

<div class="wrap">
    <div class="main">
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <div class="bucket">
            <img src="http://placehold.it/350x150"/>
            <div class="button">Text</div>
        </div>
        <p>Text</p>
    </div>
</div>

CSS

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}
strong {
    font-weight: bold;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

*,*:before,*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    background-image: url(img/bg.png);
    background-repeat: repeat;
    font-family: geneva;
}

img {
    display: block;
    max-width: 100%;
}
.wrap { 
    padding: 20px;
    width: 960px;
}
.main {
    margin: 0 auto;
    padding: 20px;  
}
.bucket { 
    display: inline-block;
    width: 31.33%;
    margin-right: 20px;
}

.bucket:last-of-type { margin-right: 0;}

.button { 
    width:100%;
    text-decoration:none;
    text-align:center;
    color:#eee;
    background:#633; 
    padding:5px;
    font-size:20px;
}
于 2013-08-26T02:57:56.963 回答