Question

我目前正在开发一个网站，但重要的是它必须适合每一页。我有5个div水平。中间的3个div是固定尺寸，200 px，400 px和200px。现在我有一个在最左边，一个在最右边，它应该同样大，并填写屏幕无论你正在查看网站的分辨率。所以中间部分应该在中间，和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%;
}

Answer 1

可以使用CSS表格布局轻松完成。见Working Fidde

如果视口小于1000px宽，那么div将缩小。 [如果视口小于1000px，则没有指定应该发生的事情]

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

有2个div填写页面的其余部分

1 个答案: