>웹 프론트엔드 >HTML 튜토리얼 >三列掉行问题_html/css_WEB-ITnose

三列掉行问题_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:42:471149검색

有一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으로 문의하세요.