从浮动DIV防止包装

我从浮动DIV防止包装

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

问题是，如果我缩小我的浏览器，右列将包装。我该如何预防？

感谢

来源

2010-12-09 Himberjack

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

来源

2010-12-09 08:39:15 ace

你曾经尝试左浮动的div左，右浮动div来吗？

来源

2010-12-09 08:35:36

耶。仍然包装。但我希望它被留下，而不是正确的 – Himberjack 2010-12-09 08:40:27

这对我的作品（example here）

你只是忘记" @id="right>，你必须在</div class="column" id="right>

这纠正擦除/，我改变了我的例子变化：

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

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

来源

2010-12-09 08:47:49 Shikiryu

对不起，这是在这里写代码的错误 – Himberjack 2010-12-09 08:54:48

只需为你的容器添加一个宽度（比如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>

来源

2010-12-09 09:51:44 seedg

如果您设置了百分比您的网站，然后给min-width到div容器，使内部的div不会换所以，即使你调整它不会换

来源

2010-12-09 10:15:51

从浮动DIV防止包装

回答

相关问题