html – 如何获得两列浮动左div布局到自动换行?

html – 如何获得两列浮动左div布局到自动换行?,第1张

概述我的 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-wei 我的 HTML看起来像这样:

<body>  <div ><ul>...</ul></div>  <div >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并将其放在nav div下面.

如何使视图div中的文本换行而不是un-float到nav div下?

解决方法 你希望你的.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边距).

.nav {    wIDth:200px;    float:left;}.vIEw {    margin-left:246px;}
总结

以上是内存溢出为你收集整理的html – 如何获得两列浮动左div布局到自动换行?全部内容,希望文章能够帮你解决html – 如何获得两列浮动左div布局到自动换行?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1059609.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存