首頁 >web前端 >html教學 >三列掉行问题_html/css_WEB-ITnose

三列掉行问题_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:42:471151瀏覽

有一DIV,想把它分三列。












body,ul,p,h1,h2,h3,h4,dl,dd,form,input,textarea,select { padding:0; margin:0; font-family:arial; }
#top { width:1000px; height:222px; margin:0 auto; border:1px solid #F11418; }
.left_nav { width:404px; height:222px; float:left; border:1px solid blue; }
.logo { width:192px; height:222px; margin:0 auto; background:#A28C8D; }
.right_nav { width:404px; height:222px; float:right; border:1px solid green; }

但最后一列:right_nav老掉在下一行,不能在同一列上,请问如何处理?


回复讨论(解决方案)

兄台,,,你.left_nav、.logo、.right_nav 三个div的宽度之和都已经达到1000px了。。你还给他们设置1px的border,,,它们能不超出宽度掉行吗!!!

我把1000PX 设置为1100PX第三列还是掉行!

.logo没有float,所以后面的.right_nav会另起一行,不管它能不能排得下或都也float;

1、logo 不要指定宽度,他将会自动充满 left_nav 和 right_nav 剩余的宽度
2、logo 要在 right_nav 之后书写





因为:
left_nav 有 float:left 他将离开文档流漂浮在左边
right_nav 有 float:right 他将离开文档流漂浮在右边
logo 没有 float 属性,所以他占据正常文档流的位置,只不过左右两边被漂浮的div给挤掉了

多谢楼上的指点

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn