如何获得两列浮动左div版面来自动换行？
我的HTML看起来像这样：
<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下方。
我怎样才能使视图中的文字换行符而不是un-float到导航div下？
你希望你的.nav div宽度为200像素，我假设你需要在.nav div和.view div之间使用46个像素，至少这就是我从margin-right:46px理解的margin-right:46px .nav div上的margin-right:46px 。 你不需要浮动.view div。 实际上，你不能这样做，因为如果它被浮动，将它放在.nav div旁边的唯一方法是设置宽度（否则它将默认为其父项的100％）。 但是你不能设置宽度，因为你希望它随着浏览器的大小而增长和缩小。
所以浮动不是一种选择，但也不是必需的。 .nav div浮动，因此.view div将出现在.nav div下面（因为浮动div被从流中取出）。 要使.view div出现在.nav div旁边，您只需设置246像素的margin-left （宽度为200像素.nav + 46像素边距）。
.nav {
width:200px;
float:left;
}
.view {
margin-left:246px;
}
您需要在浮动元素上设置宽度，否则它们将占用容器宽度的100％。
此外，你应该清理你的浮筒。
链接地址: http://www.djcxy.com/p/88473.html上一篇: How to get two column float left div layout to word wrap?