如何让两列浮动左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 下方。
如何使视图 div 中的文本自动换行而不是浮动到导航 div 下？
My HTML looks like this:
<body> <div class="nav"><ul>...</ul></div> <div class="view">this text won't wrap if I resize browser</div> </body>
and my CSS looks like this:
.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;
}If I resize the browser to be skinnier, then it won't word wrap the text in the view div at all. It will just un-float the view div and put it below the nav div.
How can I make the text in the view div word wrap instead of un-float to under the nav div?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您希望
.navdiv 的宽度为 200 像素，我假设您希望.navdiv 和.viewdiv 之间的宽度为 46 像素，至少这是我从.navdiv 上的margin-right:46px了解到的。您不需要浮动.viewdiv。事实上，你不能，因为如果它是浮动的，将其置于.navdiv 旁边的唯一方法是设置宽度（否则它将默认为其父级的 100%）。但您无法设置宽度，因为您希望它随着浏览器的大小而增大和缩小。所以浮动不是一种选择，但也没有必要。
.navdiv 是浮动的，因此.viewdiv 将出现在.navdiv 下面（因为浮动的 div 是从流量）。要使.viewdiv 出现在.navdiv 旁边，您只需将margin-left设置为 246 像素（的 200 像素宽度>.nav+ 46px 边距）。You want your
.navdiv to be 200 pixels wide and I assume you want 46 pixels between the.navdiv and the.viewdiv, at least that's what I understand from themargin-right:46pxon the.navdiv. You don't need to float the.viewdiv. In fact, you can't because if it's floated, the only way to get it next to the.navdiv is to set a width (otherwise it will default to 100% of it's parent). But you can't set the width because you want it to grow and shrink with the size of the browser.So floating is not an option but also not necessary. The
.navdiv is floated and because of this the.viewdiv will appear underneath the.navdiv (because floated div's are taken out of the flow). To make the.viewdiv appear next to the.navdiv you simply set amargin-leftof 246 pixels (200px width of.nav+ 46px margin).您需要设置浮动元素的宽度，否则它们将占据容器宽度的 100%。
另外，您应该清除浮动容器。
You need to set a width on floated elements, otherwise they will take UP TO 100% width of their containers.
also, you should clear your float containers.