用twitter引导:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

你可以试试这个:

你的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]]

使用Bootstrap 3我创建了3个等宽的div(在12列布局中，每个div 4列)。 这样，即使左/右部分的宽度不同(如果它们没有溢出列的空间)，您也可以保持中心区域居中。

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

为了创建没有库的结构，我从Bootstrap CSS复制了一些规则。

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

科普彭

我喜欢我的杠铃紧而有活力。这是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; }
}

你已经正确地做了，你只需要清除你的浮动。 简单的添加

overflow: auto; 

到容器类。

使用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。更多细节在这个答案中。