在div内对齐3节

Question

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

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

这是我的Jsfiddle example.

像[LEFT] [CENTER] [RIGHT]

这样的东西

Answer 1

这是使用CSS Calc()

的可能解决方案

  

calc() CSS功能可用于<length>，<frequency>的任何位置，   需要<angle>，<time>，<number>或<integer>。使用calc()，您   可以执行计算以确定CSS属性值。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新： OP的评论

<强>第一

  

谢谢，但我希望成为3个人之间存在差距   它们

<强>第二

  

顺便说一下，css中的calc（）函数是否可以在其他所有浏览器中使用？

答案：

代码段 ，它们之间存在差距

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CSS Calc（）函数适用于IE9 and above。

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

Answer 3

为每个设置width:33%;并删除float:right。

此处：http://jsfiddle.net/29zatakh/

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