Question

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

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

我有4个div。我在另一个div中有3个div，我试图将一个向左浮动，一个浮动到中心，一个浮动到右边。我也试图让内部div的宽度和高度自动调整到div内部单词的宽度和高度。我也希望内部的div叠加在一起，而不是在同一条线上。到目前为止，我让左边的div向左浮动，右边的div向右浮动，但我不能让中间的div居中，也不能让它调整到里面的单词的宽度和高度它的。请看一下我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

根据图像的输出，我认为flexbox解决方案是一个很好的方法。

让容器具有灵活的布局和列包装。
根据容器中的位置对齐每个项目，例如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>

Answer 2

如果只是改变你的HTML是一个选项，你可以在你的div中添加span元素，这将给你想要的，它将适用于所有浏览器：

＆＃13;

#outer {
    border: 1px solid black;
    width: 500px;
    height: 500px;
}
#innerLeft {
    text-align:left;
}
#innerMiddle {
    text-align:center;
}
#innerRight {
    text-align:right;
}
div > div > span {
    border: 1px solid red;
}

＆＃13;

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

＆＃13;

Answer 3

这就是你的意思??我有编辑

#outer {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}
#innerLeft {
  border: 1px solid red;
  /* width: 30%; */
  float: left;
}
#innerMiddle {
  border: 1px solid red;
  float: left;
  margin: 0 5px;
}
#innerRight {
    border: 1px solid red;
    float: right;
}

<div id='outer'>
  <div id='innerLeft'>LeftLeftLeftLeft</div> <br>
  <div id='innerMiddle'>MiddleMiddleMiddleMiddle</div> <br>
  <div id='innerRight'>RightRightRightRight</div>
</div>

Answer 4

写这样的html标签，希望对你有帮助！

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

使用不同的子对齐

4 个答案: