從浮動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防止包裝

回答

相關問題