使用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; } <div id="container"> <div></div> <div></div> <div></div> </div>

js小提琴

justify-content属性有五个值:

flex-start(默认) flex-end 中心 之间的空间 空间

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

flexbox的好处:

最少的代码;非常有效的 对中，无论是垂直还是水平，都是简单易行的 等高列简单易行 调整伸缩元素的多个选项 这是响应 与浮动和桌子不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox是一种现代(CSS3)技术，具有广泛的选项。

欲了解更多关于flexbox的信息，请访问:

调整伸缩项目的方法 使用CSS灵活的盒子~ MDN Flexbox ~ CSS-Tricks的完整指南 什么Flexbox?!~ YouTube视频教程

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

我喜欢我的杠铃紧而有活力。这是css3和HTML 5

First, setting the Width to 100px is limiting. Don't do it. Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario. You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead. For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again. Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the clear: both;

总结:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

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; }

如果使用HAML和SASS，则有加分项;)

HAML:

.container
  .left
  .center
  .right
  .clear

萨斯:

.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; }
}

你可以试试这个:

你的html代码是这样的:

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

你的CSS代码是这样的:

#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>

附注:你也可以向右浮动，然后向左浮动，然后向中心浮动。重要的是，浮动出现在“主”中心部分之前。

P.P.S.你经常想要最后在#容器里的这个片段:<div style="clear:both;></div>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。

我做了另一次尝试来简化它，并在不需要容器的情况下实现它。

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

CSS

      .box1 {
      background-color: #ff0000;
      width: 200px;
      float: left;
    }
    
    .box2 {
      background-color: #00ff00;
      width: 200px;
      float: right;
    }
    
    .box3 {
      background-color: #0fffff;
      width: 200px;
      margin: 0 auto;
    }

你可以在JSFiddle现场看到它

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 >

(第一次)(第二次)

(三)

所以你需要考虑所有这些方面来得到完美的结果