调整浏览器大小时防止 div 堆叠

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 堆叠

Keep divs from stacking when browser resized

html

css

mobile

responsive-design