Question

我无法理解为什么任何物体不会直接在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;}

任何帮助将不胜感激！

Answer 1

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

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

我的建议是将你的“桶”元素包装成div。这将解决您的问题。

<强> EXAMPLE

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;
}

希望这有帮助

Answer 2

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

#main p {
    clear: both;
}

这会阻止带有p元素的所有#main代码左侧或右侧的浮动元素。

Answer 3

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

<强> EXAMPLE

<强> 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;
}

物体不要进入div下面的正确位置

3 个答案: