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

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).它看起来也适用于内联 block 或 float ，但您可能不得不求助于 width: calc(100% - 320px); 这样的东西，所以我更喜欢表格解决方案。

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

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