防止浮动换行，直到元素达到最小宽度 [英] Prevent float wrap until elements have reached min-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>菜单（200像素宽）< / div&
< div style =max-width：800px; min-width：300px; float：left; border：1px black solid>这个div有max-width：800px; min-width 300px。它有足够的文本，如果有可用的空间，它会扩展到它的最大宽度。< / div>
< / body>
< / html>
在此示例中，内容的换行 div 目前发生在浏览器视口小于1000像素（菜单宽度+内容最大宽度）。我想让内容的宽度首先减少，并且只有当视口小于500px宽（菜单宽度+内容最小宽度）时，才在菜单下方放置内容。
有没有办法实现这一点，或者与我目前的安排浮动< div> s，否则？
DEMO p>
HTML
< html&
< head>
< title>< / title>
< / head>
< body>
< div class =menu>菜单（宽200像素）< / div>
< div class =content>内容div。这个div有max-width：800px; min-width 300px。它有足够的文本，如果有可用的空间，它会扩展到它的最大宽度。< / 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和（max-width：500px）{
.menu {
float ： 没有;
}
.content {
margin-left：0;
}
}
I have variable-width HTML layout with a fixed-width menu to the left of a content <div> of variable width (set by css max-width and min-width). For very narrow browser windows I would like the content to wrap beneath the menu, and I am currently achieving this by setting float:left on both menu and content.
<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>
In this example, wrapping of the content div currently occurs as soon as the browser viewport is smaller than 1000px (menu width + content max-width). I would like to have the width of the content reduce first, and have the content wrap beneath the menu only when viewport is smaller than 500px wide (menu width + content min-width)
Is there a way to achieve this, either with my current arrangement of floated <div>s, or otherwise?
Please check if this is the behavior you want.
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;
}
}
这篇关于防止浮动换行，直到元素达到最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
