响应式设计跨浏览器中的表格布局

Question

在网页中，我的布局有以下标记

<div class="parent">
      <div class="left-content"></div>
      <div class="right-content"></div>
</div>

给定标记的样式是：

.parent{
   display:table;
   width:100%;
}
.parent > .left-content{
   width:auto;
}
.parent > .right-content{
   width:320px;
}

如何让“right-content”占据320px的可用宽度，而“left-content”div占据所有剩余宽度？

注意：我不能使用以下技术来实现这种行为，因为我的布局是响应式的，我需要将“右内容”移动到“左内容”的底部具体分辨率。

标记：

<div class="parent">
     <div class="right-content"></div>          
     <div class="left-content"></div>
</div>

样式

.parent{
   display:block;
   width:100%;
}
.parent > .left-content{
   width:auto;
}
.parent > .right-content{
   width:320px;
   float:right;
}

Answer 1

为了让事情更简单，我会首先更改标记，使左侧内容低于右侧内容（根据智能手机分辨率的需要）。

 <div class="left-content"></div>
 <div class="right-content"></div>          

接下来，因为你的第一个 div 是占据剩余宽度的那个，所以简单的解决方案似乎是display:table-cell（父级为display:table）。它看起来也可以使用 inline-blocks 或 floats，但你可能不得不求助于 width: calc(100% - 320px); 这样的东西，所以我更喜欢 table 解决方案。

接下来，您添加一个简单的媒体查询以更改回较低分辨率的块。

.parent {
  display: table;
  width: 100%;
}
.parent > .left-content {
  display: table-cell;
  width: auto;        

  /* Added for visualisation */
  background: blue;
  height: 50px;
}

.parent > .right-content {
  display: table-cell;
  width: 320px;

  /* Added for visualisation */
  height: 50px;
  background: red;
}
    
/* Media query */
@media(max-width: 550px) {
.parent > .left-content {
  display: block;
}
.parent > .right-content {
  display: block;
  width: 100%;
}
}

<div class="parent">
  <div class="left-content">Left</div>
  <div class="right-content">Right</div>
</div>

Answer 2

我强烈建议使用calc，而不是强迫你的标记表现得像一个表格。

http://sassmeister.com/gist/c87585fcff7fae356adb

.left-content,
.right-content {
  width: 100%;
}

@media (min-width: 600px) {

  .left-content {
    float: left;
    width: calc(100% - 320px);
  }

  .right-content {
    float: right;
    width: 320px;
  }
}