Question

我有一个网页，页面底部有导航栏（高度为110px）。我想要做的是在页面的主要内容中相邻设置2个浮动div，而不会溢出此导航栏。

我已经把它设置得很好，但是我很难让div垂直对齐。

我有以下CSS代码设置：

#content {
height: 100%;
width:1200px;
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;
    top: 10px;
position:absolute;
overflow:hidden;
z-index:1;
}

.container {
padding: 5px 5px 5px 5px;
}

.container {
margin:0 auto;
}


.clear {
clear:both;
}

.left {
float:left;
display:inline;
}

.right {
float:right;
display:inline;
 }

#left-column {
float:left;
display:inline;
clear:both;
width:550px;
height:550px;
padding-left:40px;
background-color:#0F0;
}

#right-column {
float:right;
display:inline;
clear:right;
width:550px;
height:550px;
padding-right:40px;
background-color:#F00;
}

html很简单：

<div id='content'>
<div class='container'>
<div id="left-column">content here</div>
<div id="right-column">content here</div>
<br class="clear" />
</div>
</div>

有谁知道如何在屏幕上垂直对齐这些div？我确信有一些不需要的CSS代码 - 我只是从之前构建的页面中获取它，所以如果需要，请随时告诉我删除它的整个块！目前div正浮在页面顶部。正如我在Macbook Pro 13“屏幕上看到它看起来很好，但是只要有人在更大的浏览器窗口中查看页面，毫无疑问它会在div和导航栏之间有很多空间看起来很糟糕...... 提前谢谢了！ JD

Answer 1

不确定你想要的是什么样的，但试试看看这对你有帮助..

#content {
position:absolute;
top:0;
left:0;
width: 100%;
height: 200%;
overflow:auto;
z-index:1;
}

.container {
padding:5px;
margin:0 auto;
}

#left-column {
position: fixed;
top: 50%;
left: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#0F0;
}

#right-column {
position: fixed;
top: 50%;
right: 10px;
width:50%;
height:200px;
margin-top: -100px;
background-color:#F00;
}

#menu {
position: fixed;
width: 100%;
height: 110px;
bottom:0;
background-color: #ddd;
}
</style>

<div id='content'>
    <div id="left-column">content here</div>
    <div id="right-column">content here</div>
    <div id="menu">menu here</div>
</div>

您可以根据需要调整宽度和高度等。如果那些接近您想要的东西，请告诉我

垂直对齐基线导航栏上方的div

1 个答案: