对齐 div 内的 3 部分答案

【问题标题】：Align 3 section inside a div对齐 div 内的 3 部分
【发布时间】：2015-07-10 21:34:59
【问题描述】：

我在一个 div 中有 3 个部分，而 div 有一个 max-width: 1024px;。我让第一个浮动到左边，第三个浮动到右边。但是第二个，我尝试使用margin: 0 auto;将它设置在第一个和第三个之间，它不起作用......

How to align 3 divs (left/center/right) inside another div?

这是我的Jsfiddle example.

类似[LEFT] [CENTER] [RIGHT]

【问题讨论】：

这是一个非常古老的问题，人们已经找到了很多解决方案。那里有成千上万的展示案例和教程。你只需要打开一个搜索引擎。
你能改变div的顺序吗？
@Marc Audet 我确实尝试更改订单，但没有成功..
这听起来与我之前回答的this question 非常相似。
或使用 display: flex jsfiddle.net/fq3rbzy2?

标签： html css

【解决方案1】：

这是一个使用 CSS Calc() 的可能解决方案

calc() CSS 函数可用于<length>、<frequency>、 <angle>、<time>、<number> 或 <integer> 是必需的。与calc()，你可以执行计算以确定 CSS 属性值。

#wrap {
  width: 100%; 
  max-width: 1024px;
  border:1px dotted green;
  font-size: 0; /*fix inline block gap*/
  /* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
  width: 29.297%; /* 300px/1024px=0.29297 */
  /*max-width: 300px; - this line should be commented if you want to fill the parent with the childs .yolo */
  height: auto;
  display: inline-block;
  font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
  background: yellow
}
.yolo:nth-of-type(2) {
  background: gray;
  width: calc(100% - 58.594%) /* width x 2 (29.297% x2) */
}
.yolo:last-of-type {
  background: blue;
}

<div id="wrap">
  <section class="yolo molo1">Hello</section>
  <section class="yolo molo3">Hey</section>
  <section class="yolo molo2">Hi</section>
</div>

更新： OP 的评论如下

第一：

谢谢，但我想成为 3 个人，就像两者之间有差距他们

第二次：

顺便说一句，css 中的 calc() 函数是否适用于所有其他浏览器？

答案：

片段 它们之间有差距

#wrap {
  width: 100%;
  max-width: 1024px;
  border:1px dotted green;
  font-size: 0; /*fix inline block gap*/
  /* margin: 0 auto; - if you want the #wrap to be centered uncomment this line*/
}
.yolo {
  width: 29.297%; /* 300px/1024px=0.29297 */
  max-width: 300px;
  margin-right:6%;
  display: inline-block;
  font-size: 16px /* show font due to font-size 0 in parent*/
}
.yolo:first-of-type {
  background: yellow;
}
.yolo:nth-of-type(2) {
  background: gray;
  width: calc(100% - 70.594%) /* width: (29.297% x 2)+(6% x 2) */
}
.yolo:last-of-type {
  background: blue;
  margin-right:0
}

<div id="wrap">
  <section class="yolo molo1">Hello</section>
  <section class="yolo molo3">Hey</section>
  <section class="yolo molo2">Hi</section>
</div>

CSS Calc() 函数从 IE9 and above 工作。

【讨论】：

谢谢，但我想成为 3 个人，就像他们之间有差距一样。
这很简单，你希望它们之间有多大的差距？
顺便说一句，css 中的 calc() 函数是否适用于所有其他浏览器？
对于间隙，我希望第三个浮动到右侧，第二个浮动在它们的中间。
类似[LEFT] [CENTER] [RIGHT]

【解决方案2】：

如果你切换div元素的顺序，你可以得到你想要的结果，如下所示。

.molo1 向左浮动，.molo2 向右浮动。

保持.molo3为非浮动内容，设置左右边距为35%，即70%除以2，70%为考虑到中心div宽度后剩下的宽度。

如果需要，将 margin: 0 auto 设置为包装元素（如果需要居中）（可选）。

#wrap {
    width: 100%;
    max-width: 1024px;
    border: 1px dotted blue;
    margin: 0 auto; /* if you want centering */
}
section.yolo {
    width: 30%;
    max-width: 300px;
}
section.molo1 {
    background-color: yellow;
    float: left;
}
section.molo2 {
    background-color: blue;
    float: right;
}
section.molo3 {
    background-color: gray;
    margin: 0 35%;
}

<div id="wrap">
    <section class="yolo molo1">Hello</section>
    <section class="yolo molo2">Hi</section>
    <section class="yolo molo3">Hey</section>
</div>

【讨论】：

【解决方案3】：

为每个设置width:33%; 并去掉float:right。

这里：http://jsfiddle.net/29zatakh/

【讨论】：

【解决方案4】：

您可以使用 Flex Box 轻松做到这一点：Fiddle Sample

#wrap {
    width: 100%;
    max-width: 1024px;
    display:flex;
}
.molo1, .yolo {
    width: 30%;
    max-width: 300px;
    height: auto;
    background: yellow;
    justify-content:space-between;
      margin:2em;
    padding:1em;

}
.molo3 {
    background: gray;

}
.molo2 {

    background: blue;
}

【讨论】：