HTML如何在另一个 div 内对齐 3 个 div（左/中/右）？

我想在容器 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]

有什么提示吗？

分割线

网友回答：

使用该 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

分割线

网友回答：

使用弹性框水平对齐三个 div

这是一个 CSS3 方法，用于在另一个 div 中水平对齐 div。

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

js小提琴

该属性采用五个值：justify-content

flex-start（默认）
flex-end
center
space-between
space-around

在所有情况下，三个 div 都在同一行上。有关每个值的说明，请参阅：https://stackoverflow.com/a/33856609/3597276

弹性框的优点：

最少的代码;非常高效
垂直和水平居中既简单又容易
等高柱简单易用
用于对齐柔性元素的多个选项
响应迅速
与浮动和表格不同，浮动和表格提供的布局容量有限，因为它们从未用于构建布局，
Flexbox 是一种具有广泛选项的现代（CSS3）技术。

要了解有关弹性框的更多信息，请访问：

对齐弹性项目的方法
使用 CSS 灵活框 ~ MDN
弹性框完整指南 ~ CSS 技巧
什么弹性框？！~ 优酷视频教程

浏览器支持：除 IE < 10 外，所有主流浏览器都支持 Flexbox。某些最新的浏览器版本（如 Safari 8 和 IE10）需要供应商前缀。要快速添加前缀，请使用自动前缀器。此答案中的更多详细信息。

分割线

网友回答：

如果您不想更改HTML结构，也可以通过添加到包装器元素和a到中心元素来完成。text-align: center;display: inline-block;

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

模板简介：该模板名称为【HTML如何在另一个 div 内对齐 3 个 div（左/中/右）？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。