Question

我正在尝试为某些课程建立一个网站，而我的两个中间栏目由于某种原因被推到了左边。标题，导航栏和页脚都垂直对齐，但中间的两个浮动div被强制向左。

HTML

<html>
<head>
    <title>Churches Of Norwich</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="site.css"> 
</head>

<body>
     <div id="bg"> 
        <div id="content">
            <div id="headboxspacer"></div>
            <div id="head-box">Churches of Norwich</div>
            <div id="navbar" style="float: none">
                <div id="tabs">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="map.html">Map</a></li>
                        <li><a href="churches.html">Churches</a></li>
                        <li><a href="comments.html">Comments</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                    </ul>
                </div>
            </div>
            <div id="container" style="overflow:hidden;width: 100%">
                <div id="homeboxleft" style="clear: both">Testing</div>
                <div id="homeboxright" style="clear: both" >Right</div>
            </div>
            <div id="footer"> footer </div>
            <div id="bottomspacer"></div>
        </div>
    </div>
</body>
</html>

CSS

#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}

#headboxspacer{
height:50px;
width:100%;
}

#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}

#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;

font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
} 

#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}

#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}

#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
} 

#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}

#container{
width: 1200px;
}

#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;

float: right;

margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);

text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;    
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#mainbox{

background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6; 
}

#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}

#bottomspacer{
height:100px;
width:100%;
}

Answer 1

因为导航栏的填充被添加到导航栏的宽度。

你必须使用带有内部div的盒子模型解决方案 http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box

然后在所有浏览器中都有相同的宽度和外观

Answer 2

我还附上了截图。

这是小提琴的全屏预览：

<强> http://fiddle.jshell.net/zHBhs/2/show/

我认为你的问题是内联css：

<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here

并在你的这个css类中删除了margin属性：

#homeboxright{
    background-color: #FEE7BE;
    height: 500px;
    width: 50%;
    float: left;
    margin: 0; //  <------------------made margin for all sides to 0
    text-orientation: inherit;
    font-family: sans-serif;
    font-size: 10pt;
    color: #003651;
    font-style: normal;
    text-align: center;
}

尝试这个并查看是否可以解决这个问题：http://jsfiddle.net/zHBhs/2/

对这些css类做一些工作：

#head-box{
    padding:0;    // change paddings to 0
    margin: 5px 0; // just apply to top and bottom margins
}

#navbar{
    margin: 0;      // change paddings to 0
    padding:10px 0; // just apply to top and bottom margins
}

#footer{
   margin: 0;      // change paddings to 0
   padding:10px 0; // just apply to top and bottom margins
}

enter image description here

Answer 3

保存两列的“容器”设置为“width = 100％”。这意味着div将在页面的整个宽度上展开。

尝试删除此宽度属性，然后删除所有浮动属性。

Answer 4

在主div中左右两侧获取。然后应用这个css：

#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}

注意：右边的div将附加左边的一个，如果要将它浮动到右边，则应用float：right;它。但建议只向左浮动：）

Example for both sides使用上述技巧。

为什么我的Div标签被向左推几个像素？

4 个答案: