Question

所以我有一个网站，当它调整大小时，div开始堆叠。我一直无法弄清楚为什么我在容器上使用最小宽度。

以下是div的布局：

<div id="content">

<div id="leftColumn">
</div>

<div="content">
</div>

</div>

这是CSS

#container {
position: absolute;
left: 0;
top: 0;
width: 99%;
min-width: 700px;
height: 100%;
background-color: #FFFFFF;
z-index: 0;
display: inline-block;
white-space: nowrap;
}

#leftColumn {
width: 20%;
min-width: 200px;
height: 100%;
background-color: #2196f3;
color: white;
text-align: center;
float: left;
font-size: 100%;
display: inline;
}

#content {
text-align: center;
left: 0%;
height: 100%;
width: 80%;
min-width: 498px;
background-color: white;
float: left;
display: inline;
}

非常感谢任何帮助。

Answer 1

您是否反对使用内联块而不是浮点数？像This:

一样

HTML

<div id="container">
<div id="leftColumn">leftcolumn</div>
<div id="content">content</div>
</div>

CSS

#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
z-index: 0;
display: inline-block;
white-space: nowrap;
}
#leftColumn {
min-width:200px;
height: 100%;
background-color: #2196f3;
color: white;
text-align: center;
display:inline-block;
font-size: 100%;
}
#content {
text-align: center;
min-width:200px;
width:80%;
height: 100%;
background-color: white;
display:inline-block;
}

Answer 2

你写的

<div="content"></div>

此。你错过了身份证申报。它应该是

<div id="content"></div>

在调整浏览器大小时保持div不会堆叠

2 个答案: