Question

出于某种原因，我向右浮动的对象显示的效果与我在Firefox中浮动的对象不同。右边的那个在页脚的底部没有边距，左边的边缘有所需的结果。知道为什么会这样吗？这是我的CSS和我的HTML：

CSS：

p {
font-family: 'Open Sans', 'sans-serif';
}

#container {
overflow:hidden;
width: 100%;
max-width:960px;
background-color: #FFFFFF;
margin-left:auto;
margin-right:auto;
}

#branding {
width:100%;
height:100px;
background-color:black;
z-align:1000;
}

#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
z-align:1001;
}

#toparea {
font-family: 'Open Sans', 'sans-serif';
margin:20px 0px 20px 0;
float:right;
color:white;
z-align:1001;
}

#toparea ul li {
list-style:none;
display:inline-block;
padding:0 30px 20px 0;
}

#topcontent {
width:100%;
background-color:inherit;
margin:0;
z-align:1000;
}

#blockone {
border-radius: 15px;
width:48%;
height:200px;
background-color:gray;
float:left;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}

#blockone p {
font-family: 'Open Sans', 'sans-serif';
font-size:20px;
color: white;
padding:20px 0 0 20px;
}

#blocktwo {
border-radius: 15px;
width:48%;
height:200px;
float:right;
background-color:gray;
border-width:1px;
border-color:black;
margin: 10px 0 0 0;
}

#blocktwo p {
font-size:20px;
color: white;
padding:20px 0 0 20px;
}

#footer {
clear:both;
-moz-border-radius: 5px 10px 5px 10px;
border-radius: 15px;
width:100%;
height:200px;
background-color:gray;
border-width:1px;
border-color:black;
}

HTML：

<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='css/base.css' rel="stylesheet" type="text/css">

</head>


<body>
<div id="container">
    <div id="branding">
        <div id="logo"></div>
        <div id="toparea">
            <ul>
                <li>Content</li>
                <li>Content2</li>
            </ul>
        </div>

    </div>

    <div id="topcontent">
                <div id="blockone">
                <p>some copy</p>
                </div>

                <div id="blocktwo">
                <p>this is more text</p></div>
                </div>
        <div id="footer"><p>Some more copy</p></div>
    </div>

</div>
</body>

</html>

Answer 1

同一元素内的兄弟元素的边距加起来。要更正此问题，请替换此...

#blocktwo {
    border-radius: 15px;
    width:48%;
    height:200px;
    float:right;
    background-color:gray;
    border-width:1px;
    border-color:black;
    margin: 10px 0 0 0;
}

......有了......

#blocktwo {
    border-radius: 15px;
    width:48%;
    height:200px;
    float:right;
    background-color:gray;
    border-width:1px;
    border-color:black;
    margin-bottom: 10px; /* <-- this is what I changed */
}

<强> HERE IS A DEMO

Answer 2

您为左侧浮动的项目和右侧浮动的项目设置了不同的边距。如果您希望它们以相同的边距排列，您还需要确保它们具有相同的高度。此外，Z-Align无效CSS。

试试这个：

#logo {
background-image:url("images/google-logo-small.png");
height:69px;
width:200px;
margin:15px 0 0 10px;
float:left;
}

#toparea {
font-family: 'Open Sans', 'sans-serif';
height:69px;
margin:15px 0 0 10px;
float:right;
color:white;
}

Answer 3

#toparea { margin:20px 0px 20px 0; }

这是你的问题。导航div上的下边距正在推动其下方的内容。删除底部边距，它将按预期运行。

浮动右边没有使用与浮动左边相同的底部边距

3 个答案: