如何在一个div中对齐三个div(左/中/右)?
P粉092778585
P粉092778585 2023-08-21 15:09:18
[HTML讨论组]

我想在一个容器div内部对齐3个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]

有什么建议吗?

P粉092778585
P粉092778585

全部回复(1)
P粉029057928

使用这个CSS,将你的div放置如下(首先是浮动):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

附注:你也可以先浮动右边,然后左边,再居中。重要的是浮动的内容要在“主要”中心部分之前。

附注:通常你会想在#container中的最后加入这段代码:<div style="clear:both;"></div>,它会使#container的高度垂直延伸,以容纳两侧的浮动内容,而不仅仅是从#center的高度来定位,这样可以避免两侧内容溢出底部。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号