如何獲得兩列浮動左div佈局換卷？

我的HTML看起來像這樣：如何獲得兩列浮動左div佈局換卷？

<body> 
    <div class="nav"><ul>...</ul></div> 
    <div class="view">this text won't wrap if I resize browser</div> 
</body>

和我的CSS是這樣的：

.nav { 
    width:200px; 
    float:left; 
    font-weight:bold; 
    margin-right:46px; 
} 

.nav a { 
    font-weight:normal; 
} 

.nav ul { 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    text-align:right; 
} 

.nav ul li { 
    margin-bottom:7px; 
} 

.view { 
    float:left; 
}

如果我調整瀏覽器是瘦的，那麼它不會自動換行文本視圖div。它只會取消浮動視圖div並將其放在導航div下方。

如何讓視圖div文字換行而不是un-float到導航div下方的文本？

來源

2011-11-04 Ryan

您希望您的.nav格爲200個像素寬，我假設你想要的.nav DIV和.view格之間的46個像素，至少這是我從margin-right:46px在.nav DIV理解。您不需要浮動.view股利。事實上，你不能，因爲如果它是浮動的，唯一的方法是將它設置爲.nav div旁邊的寬度（否則它將默認爲其父項的100％）。但是你不能設置寬度，因爲你希望它隨着瀏覽器的大小而增長和縮小。

所以浮動不是一個選項，但也沒有必要。 .nav div浮動，因此.view div將出現在.nav div下面（因爲浮動的div被從流中取出）。爲了讓.view div出現在.nav div旁邊，您只需設置246像素的margin-left（200px寬度的.nav + 46px邊距）。

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

.view { 
    margin-left:246px; 
}

來源

2011-11-04 22:57:18

非常好。從來沒有想過這樣做。 – Ryan

您需要在浮動元素上設置寬度，否則它們將佔用其容器的100％寬度。

也，你應該clear your float容器。

來源

2011-11-04 22:20:12 Jason

如何獲得兩列浮動左div佈局換卷？

回答

相關問題