Chr*_*son 4 html css css-float variable-width
我有可变宽度HTML布局,<div>在可变宽度内容的左侧有一个固定宽度的菜单(由css max-width和min-width设置).对于非常狭窄的浏览器窗口,我希望将内容包装在菜单下面,而我目前通过设置float:left菜单和内容来实现此目的.
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 200px; float: left; border: 1px black solid">Menu (200px wide)</div>
<div style="max-width: 800px; min-width: 300px; float:left; border: 1px black solid">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>
在此示例中,div一旦浏览器视口小于1000px(菜单宽度+内容最大宽度),当前就会发生内容的换行.我希望首先减小内容的宽度,并且仅当视口小于500px宽(菜单宽度+内容最小宽度)时才将内容包裹在菜单下方
有没有办法实现这一点,无论是我目前的浮动<div>s 安排,还是其他方式？
请检查这是否是您想要的行为.
DEMO
HTML
<html>
<head>
<title></title>
</head>
<body>
<div class="menu">Menu (200px wide)</div>
<div class="content">Content div. This div has max-width: 800px; min-width 300px. It has enough text that it expands to its max-width if there is space available to do so.</div>
</body>
</html>?
CSS
.menu {
width: 200px;
float: left;
border: 1px black solid
}
.content {
max-width: 800px;
min-width: 300px;
margin-left: 200px;
border: 1px black solid
}
@media all and (max-width: 500px) {
.menu {
float: none;
}
.content {
margin-left: 0;
}
}