0

我目前正在开发一个网站,但重要的是它必须适合每个页面。我有5个水平的div。中间的 3 个 div 是固定大小的,200 像素、400 像素和 200 像素。现在我有一个在最左边和一个最右边,它应该一样大,并且无论您以什么分辨率查看网站,都应该填满屏幕。所以中间部分应该在中间,而 2中间部分左右的div应该填满屏幕。我尝试了其他线程中解释的几种技术,但大多数仅适用于左侧,或仅适用于右侧部分,并且不适用于左右两侧。也许有人有解决方案?

我的 HTML

<div id="left">
test
</div>
<div id="buttonsleft">
test
</div>
<div id="middle">
test
</div>
<div id="buttonsright">
test
</div>
<div id="right">
test
</div>

我的 CSS

#left{
    float:left;
    background-color:#C00;
    width:15%;
    height:100%;
}
#buttonsleft{
    float:left;
    background-color:#3F0;
    width:200px;
    height:100%;
}
#middle{
    float:left;
    background-color:#30F;
    width:400px;    
    margin:auto;
}
#buttonsright{
    float:left;
    background-color:#3FF;
    width:200px;
    height:100%;
}
#right{
    float:left;
    background-color:#300;
    width:15%;
    height:100%;
}
4

1 回答 1

1

可以使用 CSS 表格布局轻松完成。看到那个工作的朋友

如果视口小于 1000px 宽,那么 div 将缩小。[您没有指定如果视口小于 1000 像素会发生什么]

HTML:

<div class="Container">
    <div id="left">left</div>
    <div id="buttonsleft">buttonsleft</div>
    <div id="middle">middle</div>
    <div id="buttonsright">buttonsright</div>
    <div id="right">right</div>
</div>

CSS:

* {
    font-size: 25px;
    color: white;
}
.Container
{
    display: table;
    width: 100%;
}
.Container > div
{
    display: table-cell;
}
#left {
    background-color:#C00;
}
#buttonsleft {
    background-color:#3F0;
    width:200px;
}
#middle {
    background-color:#30F;
    width:400px;
}
#buttonsright {
    background-color:#3FF;
    width:200px;
}
#right {
    background-color:#300;
}
于 2013-10-02T12:32:51.963 回答