<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布局到自动换行?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)