Html 如何将两列float left div布局转换为word wrap？_Html_Css_Css Float

Html 如何将两列float left div布局转换为word wrap？

html css

Html 如何将两列float left div布局转换为word wrap？,html,css,css-float,Html,Css,Css Float,我的HTML如下所示： <body> <div class="nav"><ul>...</ul></div> <div class="view">this text won't wrap if I resize browser</div> </body> .nav { width:200px; float:left; font-weight:bold; marg

我的HTML如下所示：

… 如果我调整浏览器大小，此文本将不会换行我的CSS如下所示：

<body> <div class="nav"><ul>...</ul></div> <div class="view">this text won't wrap if I resize browser</div> </body> .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; } .导航{ 宽度：200px；浮动：左；字体大小：粗体；右边距：46px； } .导航a{ 字体大小：正常； } 美国海军{ 填充：0；保证金：0；列表样式类型：无；文本对齐：右对齐； } 李国荣先生{ 边缘底部：7px； } .视图{ 浮动：左； } 如果我将浏览器的大小调整为更瘦，那么它根本不会在视图div中对文本进行文字换行。它只会取消视图div的浮动，并将其置于导航div的下方

如何使视图div中的文本换行而不是取消浮动到nav div下？

您需要设置浮动元素的宽度，否则它们将占据其容器的100%宽度

另外，您应该使用容器。

您希望

.nav

div的宽度为200像素，我假设您希望

.nav

div和

.view

div之间有46像素，至少我从

.nav

div上的

右边距：46px

中了解到了这一点。你不需要浮动

.view

div。事实上，你不能这样做，因为如果它是浮动的，唯一能让它靠近

.nav

div的方法就是设置一个宽度（否则它将默认为其父项的100%）。但是您不能设置宽度，因为您希望它随着浏览器的大小而增长和收缩

因此，浮动不是一种选择，也不是必要的。

.nav

div浮动，因此

.view

div将出现在

.nav

div下方（因为浮动的div从流中取出）。要使

.view

div显示在

.nav

div旁边，只需将

左边距设置为246像素（200px宽度.nav
+46px边距）
很不错的。我从没想过要那样做。