Question

我有

    <div id="containter"><div class="column" id="left">
left</div><div class="column" id="right">right</div></div>
    .column
    {
    float: left;
    }

问题是，如果我收缩我的浏览器，右边的列将会换行。我该如何防止这种情况？

由于

Answer 1

您可以尝试添加容器div的宽度。

Answer 2

你有没有试过将左边的div向左浮动并向右浮动div？

Answer 3

它适用于我（example here）

您忘了" @ id="right>而必须删除/中的</div class="column" id="right>

更正了，我在我的例子中做了更改：

http://www.jsfiddle.net/D2TvR/2/

为容器和overflow:auto添加宽度（否则，它不会溢出浮动的div）

Answer 4

只需在容器中添加一个宽度（比如50％）并将它们设置为向左浮动。这样，两个容器只占宽度屏幕的一半。这就是为什么你最好使用百分比而不是像素，因为像素表示静态宽度，并且根据你的问题，因为你要调整浏览器窗口的大小，你需要使用流体宽度来实现页面。这是一个有效的例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
.column { float: left; width:50%; }
</style>
</head>

<body>
    <div id="containter">
        <div class="column" id="left">
            This is the left container
        </div>
        <div class="column" id="right">
            This is the right container
        </div>
    </div>
</body>
</html>

Answer 5

如果您已将网站设置为百分比将min-width提供给容器div，以便内部div不会换行因此即使你调整大小也不会包装

防止浮动div包裹

5 个答案: