防止浮动换行，直到元素达到最小宽度答案

【问题标题】：Prevent float wrap until elements have reached min-width防止浮动换行，直到元素达到最小宽度
【发布时间】：2013-01-10 21:07:55
【问题描述】：

我有一个可变宽度的 HTML 布局，在可变宽度的内容 <div> 的左侧有一个固定宽度的菜单（由 css 最大宽度和最小宽度设置）。对于非常狭窄的浏览器窗口，我希望内容包含在菜单下方，我目前通过在菜单和内容上设置 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>

在此示例中，当前只要浏览器视口小于 1000 像素（菜单宽度 + 内容最大宽度），就会对内容 div 进行换行。我希望首先减小内容的宽度，并且仅当视口小于 500px 宽（菜单宽度 + 内容最小宽度）时才将内容包裹在菜单下方

有没有办法实现这一点，无论是使用我目前的浮动<div>s 安排还是其他方式？

【问题讨论】：

现在包含最小示例代码。

标签： html css css-float variable-width

【解决方案1】：

请检查这是否是您想要的行为。

演示

JSFiddle

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

}

【讨论】：

【解决方案2】：

我想这就是你想要的：http://jsfiddle.net/joplomacedo/WXFQz/

解决方案是一个简单的媒体查询 - 在 XYZpx 的屏幕宽度下执行 this。如果您以前从未听说过它，这里有一篇关于它的文章http://css-tricks.com/resolution-specific-stylesheets/

对于那些看不到小提琴的人，这里是 html 和 css：

HTML：

<div class="container"> <!-- it's possible to do it without this extra element. it's simply more intuitive this way -->
    <div class="menu"></div>
    <div class="content"></div>
</div>

CSS：

.container {
    max-width: 1000px; /* your self defined 800px max-width for the content-div + 200px from the .menu's width */
    min-width: 200px;
}

.menu,
.content {
    height: 200px;
}

.menu {
    float: left;
    width: 200px;
}

.content {
    margin-left: 200px; /* same as '.menu's width */
}

@media (max-width : 400px) {
    .menu {
        float: none;
        width: auto;
    }

    .content {
        margin-left: 0;
    }
}

【讨论】：

【解决方案3】：

有一个来自 css-tricks 的演示：

http://css-tricks.com/examples/PerfectFluidWidthLayout/

我希望这对你有好处。

【讨论】：

这个例子在击中他想要的目标时不会在菜单下换行。不过效果不错