如何在没有Flex CSS的情况下仅在肖像模式平板电脑中将中间部分与底部对齐

Question

我有3个部分，其中在肖像模式下，第2节应在底部和第1和第3节中，以及在景观模式中，所有3节都应将。

我也应该支持IE9浏览器，这就是不使用Display Flex属性的原因。另外，我需要维持相等的高度，正在使用CSS中的表单元属性。

这是我尝试的。

.container{
  width: 100%;
  border: 1px solid red;
  display: table;
}
.section{
  display: table-cell;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
  width: 30%;
}

<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

Answer 1

一种可能的解决方案是在第1节和第3节中设置50％的宽度，并在第2节中设置position: absolute，例如在以下示例中：

.container{
  width: 100%;
  border: 1px solid red;
  display: table;
}
.section{
  display: table-cell;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
  width: 30%;
}
@media screen and (max-width: 600px) {
  .section:nth-of-type(2) {
    position: absolute;
    top: 100px;
    left: 45%;
  }
  .section:nth-of-type(1), .section:nth-of-type(3) {
    width: 50%;
  }
}

<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

我还创建了一个在此处展示此信息的JSfiddle。

希望这会有所帮助！：）

编辑：

进行此操作的更简单的方法是，如果您将第三部分（或在景观视图中右边的任何部分显示）。这样，您可以控制显示更多，甚至可以与多个容器一起使用：

.container{
  width: 100%;
  border: 1px solid red;
  display: table;
}
.section{
  display: table-cell;
  height: 50px;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
  width: 30%;
}
@media screen and (max-width: 600px) {
  .container {
    margin-bottom: 20px;  
  }
  .section {
    display: block;
    float: left;
  }
  .section:nth-of-type(1), .section:nth-of-type(2) {
    width: calc(50% - 2px);
  }
  .section:nth-of-type(3) {
    width: 100%
  }
}

<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>
<div class="container">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</div>

这里的关键是与float: left结合使用display: block在狭窄的宽度上使用。前两个部分仅是宽度的50％（减去边界的宽度），因此它们彼此相邻漂浮。第三部分占行宽度的100％。

再次，由于stackoverflow太宽以至于无法显示此媒体查询，所以我创建了第二个小提琴，在此处展示此问题。

希望这会有所帮助！：）