html - 使用不同的子对齐方式垂直堆叠 div

Question

http://s4.postimg.org/mbrpxn2d9/Untitled.png

编辑:不是重复的。另一个问题没有包含有关div自动调整为内部单词的信息。

我有 4 个 div。我在另一个 div 中有 3 个 div，我试图将一个 float 到左侧，一个 float 到中心，一个 float 到右侧。我也在尝试使内部div的宽度和高度自动调整为div内部文字的宽度和高度。我还希望内部的 div 相互堆叠，而不是在同一条线上。到目前为止，我让左边的div向左浮动，右边的div向右浮动，但是我就是不能让中间的div居中，也不能让它适应里面的字的宽高它的。请看一下我的代码:

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#innerLeft {
  border: 1px solid red;
  float: left;
}
#innerMiddle {
  border: 1px solid red;
  margin: auto;
}
#innerRight {
  border: 1px solid red;
  float: right;
}

<div id='outer'>
  <div id='innerLeft'>Left</div>
  <div id='innerMiddle'>Middle</div>
  <div id='innerRight'>Right</div>
</div>

Answer 1

根据图像的输出，我认为 flexbox 解决方案是一个不错的选择。

1. 让容器有一个灵活的列环绕布局。

2. 根据容器中的位置对齐每个元素，即 flex-start、center 和 flex-end

#outer {
  display: flex;
  display: -ms-flex;
  flex-flow: column wrap; /* Wrap the items column wise */
  justify-content: flex-start; /* Items to start from the top of the container */
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#innerLeft {
  align-self: flex-start; /* Equivalent to float: left of your code */
  border: 1px solid red;
}
#innerMiddle {
  align-self: center; /* Equivalent to margin: auto */
  border: 1px solid red;
}
#innerRight {
  align-self: flex-end; /* Equivalent to float: right */
  border: 1px solid red;
}

<div id='outer'>
  <div id='innerLeft'>Left</div>
  <div id='innerMiddle'>Middle</div>
  <div id='innerRight'>Right</div>
</div>