那些遇到过的问题

如何在另一个div内对齐3个div(左/中/右)？

ser*_*erg 375 html css alignment css-float flexbox

我希望在容器div中对齐3个div,如下所示:

[[LEFT]       [CENTER]        [RIGHT]]
Run Code Online (Sandbox Code Playgroud)

容器div是100%宽(没有设置宽度),并且在调整容器大小后中心div应保持在中心.

所以我设置:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
Run Code Online (Sandbox Code Playgroud)

但它变成了:

[[LEFT]       [CENTER]              ]
                              [RIGHT]
Run Code Online (Sandbox Code Playgroud)

有小费吗？

dka*_*ins 349

有了这个CSS,就把你的div这样(先浮动):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

PS你也可以漂浮,然后向左,然后向中心.重要的是浮子位于"主"中心区域之前.

PPS你经常想要最后一个内部#container片段:<div style="clear:both;"></div>它将#container垂直延伸以包含两个侧面浮动,而不是仅从中获取高度,#center并且可能允许侧面从底部突出.

  • 这个答案已有六年多了.在2016年,正确的答案是flexbox. (5认同)
  • PPS清晰:两者都像魅力一样,感谢! (4认同)

fru*_*sli 119

如果您不想更改HTML结构,也可以通过添加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;
}
Run Code Online (Sandbox Code Playgroud)

现场演示:http://jsfiddle.net/CH9K8/

  • 当左右尺寸相等时，这是完美的选择。否则，中心将不居中。 (2认同)

Mic*_*l_B 110

使用Flexbox水平对齐三个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;
}
Run Code Online (Sandbox Code Playgroud) 
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

该justify-content属性有五个值:

  • flex-start (默认)
  • flex-end
  • center
  • space-between
  • space-around

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

flexbox的好处:

  1. 最小代码; 效率很高
  2. 垂直和水平对中,简单易行
  3. 等高柱简单易行
  4. 用于对齐flex元素的多个选项
  5. 它的反应灵敏
  6. 与浮动和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,flexbox是一种现代(CSS3)技术,具有广泛的选项.

要了解有关flexbox的更多信息,请访

浏览器支持: 所有主流浏览器都支持 Flexbox,IE <10除外.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加前缀,请使用Autoprefixer.这个答案的更多细节.

  • Flex比使用浮子要好得多. (6认同)
  • 不幸的是，这仅适用于相同宽度的项目。另请参阅 /sf/ask/2278590401/ (5认同)

Raj*_*ale 20

Float属性实际上不用于对齐文本.

此属性用于向右或左或中心添加元素. 

div > div { border: 1px solid black;}
Run Code Online (Sandbox Code Playgroud) 
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
Run Code Online (Sandbox Code Playgroud)

对于float:left输出将是[First][second][Third]

对于float:right输出将是[Third][Second][First]

这意味着float => left属性会将你的下一个元素添加到前一个元素的左边,相同的情况是右边的

您还必须考虑父元素的宽度,如果子元素的宽度总和超过父元素的宽度,则下一个元素将添加到下一行

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
Run Code Online (Sandbox Code Playgroud)

[第一秒]

[第三]

因此,您需要考虑所有这些方面才能获得完美的结果

Eri*_*hic 13

我喜欢我的酒吧紧凑而充满活力.这适用于CSS 3和HTML 5

  1. 首先,将宽度设置为100px是有限的.不要这样做.

  2. 其次,将容器的宽度设置为100%可以正常工作,直到它被称为整个应用程序的页眉/页脚栏,如导航或信用/版权栏.使用right: 0;,而不是针对该方案.

  3. 您正在使用id(hash #container,#left等)而不是类(.container,.left等),这很好,除非您想在代码中的其他地方重复样式模式.我考虑使用类来代替.

  4. 对于HTML,无需交换订单:left,center和right.display: inline-block;解决了这个问题,将代码恢复到更清洁,逻辑更好的状态.

  5. 最后,你需要清除所有浮动,以便它不会混乱未来<div>.你这样做clear: both;

总结一下:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
Run Code Online (Sandbox Code Playgroud)

使用HAML和SASS的加分点;)

HAML:

.container
  .left
  .center
  .right
  .clear
Run Code Online (Sandbox Code Playgroud)

上海社会科学院:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
Run Code Online (Sandbox Code Playgroud)

San*_*lse 13

有几种技巧可用于对齐元素.

01.使用Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

02.使用Flex Trick

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

03.使用Float Trick

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Man*_*mar 8

这可以通过CSS3 Flexbox轻松完成,这个功能将在<IE9几乎所有浏览器中将来使用(什么时候完全死机).

检查浏览器兼容性表

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}
Run Code Online (Sandbox Code Playgroud)

输出: 

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

761288 次

最近记录：

7 年，1 月 前
在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？ 602
Flexbox:水平和垂直居中 588
如何并排放置div 222
Flexbox代码适用于除Safari之外的所有浏览器.为什么？ 65
CSS等高柱 5
更多相关链接
相关归档
Tomcat基本URL重定向 72
仅删除特定div的装订线空间 66
如何在LESS中使用if语句 55
用于客户端表单验证和交互的最佳JavaScript解决方案？ 52
突出显示条带化HTML表格的单击行 41
如何使用javascript或jquery删除多余的空格？ 26
使输入字段看起来像bootstrap 3中的表格单元格 19
URL上的HTML <script>片段是否可以用于纯客户端应用程序中的XSS？ 18
为什么 flex 给 hr 元素宽度为 0？ 11
在离子中对齐按钮 6
难疑归档
AngularJS:服务与提供商vs工厂 3296
在C#中将int转换为枚举 3015
樱桃挑选Git意味着什么？ 2117
Git push需要用户名和密码 1327
关闭特定行的eslint规则 1214
LF将被git中的CRLF取代 - 这是什么,它是否重要？ 1146
为特定提交生成git补丁 1144
为什么使用Redux而不是Facebook Flux？ 1126
如何以CSV格式输出MySQL查询结果？ 1118
在拉动期间解决Git合并冲突以支持其更改 1104