我的 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;
}
如果我将浏览器的大小调整得更窄，那么它根本不会对 View div 中的文本进行自动换行。它只会取消 float View div 并将其放在导航 div 下方。
如何使 View div 中的文本自动换行而不是取消 float 到导航 div 下？
最佳答案
您希望您的 .nav div 为 200 像素宽，我假设您希望 .nav div 和 .view 之间有 46 像素> div，至少这是我从 .nav div 上的 margin-right:46px 中了解到的。您不需要 float .view div。事实上，您不能这样做，因为如果它是 float 的，将它放在 .nav div 旁边的唯一方法是设置宽度(否则它将默认为其父级的 100%)。但是你不能设置宽度，因为你希望它随着浏览器的大小而增长和缩小。
所以 float 不是一个选项，但也不是必需的。 .nav div 是 float 的，因此 .view div 将出现在 .nav div 下方(因为 float 的 div 从流量)。要使 .view div 出现在 .nav div 旁边，您只需将 margin-left 设置为 246 像素(200px 宽度 .nav + 46px 边距)。
.nav {
width:200px;
float:left;
}
.view {
margin-left:246px;
}
关于html - 如何让两列 float 左 div 布局自动换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8016274/