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

如何制作＆＃34;正确内容＆＃34;占用320px的可用宽度和＆＃34;左内容＆＃34; div占据了所有剩余的宽度？

请注意：我无法使用以下技术来实现此行为，因为我的布局是响应式的，我需要移动＆＃34;右内容＆＃34;在＆＃34;左内容＆＃34;的底部具体决议。

标记：

<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是占用剩余宽度的div，所以简单的解决方案似乎是display:table-cell（而父作为display:table）。它看起来也适用于内联块或浮点数，但你可能不得不诉诸width: calc(100% - 320px);这样的东西，所以我更喜欢表格解决方案。

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

＆＃13;

.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%;
}
}

＆＃13;

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

＆＃13;

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

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

2 个答案: