我想有3个div对齐在一个容器div,就像这样:
[[LEFT] [CENTER] [RIGHT]]
容器div是100%宽(没有设定宽度),中心div在调整容器大小后应该保持在中心。
所以我设置:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
但它变成了:
[[LEFT] [CENTER] ]
[RIGHT]
任何建议吗?
Float属性实际上并不用于对齐文本。
此属性用于将元素添加到右侧、左侧或中心。
Div > Div{边框:1px纯黑色;}
< html >
< div >
< div风格= "浮动:左”>第一个< / div >
< div风格= "浮动:左”>第二< / div >
< div风格= "浮动:左”>第三< / div >
< div风格= "浮动:对" >第一个< / div >
< div风格= "浮动:对" >第二< / div >
< div风格= "浮动:对" > 3 < / div >
< / div >
< / html >
左输出为[First][second][Third]
右输出为[Third][Second][First]
这意味着float => left属性将把你的下一个元素添加到上一个元素的左边,right也是如此
此外,你还必须考虑父元素的宽度,如果子元素的宽度之和超过了父元素的宽度,那么下一个元素将在下一行添加
< > html
< div style =教室:100% >
< div style =花车:左派;教室:50%第一> < / div >
< div style =花车:左派;教室:50% >第二个< / div >
< div style = "漂浮:左派;第三教室:50% > < / div >
< / div >
< / html >
(第一次)(第二次)
(三)
所以你需要考虑所有这些方面来得到完美的结果