html - 在 HTML 中的左侧 div 之前以可变宽度将 div float 到右侧以进行响应式设计

Question

这个打败了我，我确信我错过了一些简单的东西。

我想要做的是让左侧边栏的宽度固定，右侧填充可变宽度的内容，以处理响应式设计。

问题来了，因为我想让左侧边栏的 HTML 出现在右侧 div 之后，这样当分辨率降低到移动尺寸时，我可以删除 float 并让内容出现在侧边栏之前，并且两者的宽度均为100%

.header {
  width: 100%;
  background-color: green;
}
.content {
  background-color: red;
  height: 100px;
  float: right;
}
.sidebar {
  background: blue;
  width: 240px;
  height: 100px;
}
@media (max-width: 750px) {
  .content {
    float: none;
    width: 100%;
  }
  .sidebar {
    width: 100%;
  }
}

<div class="header">Top</div>
<div class="content">Content (right on widescreen, top on less than 750px</div>
<div class="sidebar">Sidebar (left on widescreen, bottom on less than 750px</div>

http://jsfiddle.net/a5LLhmo8/

Answer 1

您可以使用 calc() 来实现。只需添加到 .content 宽度:calc(100% - 240px);您将使内容响应并占据剩余的宽度。

示例 http://jsfiddle.net/a5LLhmo8/1/

.header {
    width: 100%;
    background-color: green;
}
.content {
    background-color: red;
    height: 100px;
    float: right;
    width: calc(100% - 240px);
}
.sidebar {
    background: blue;
    width: 240px;
    height: 100px;
}
@media (max-width: 750px) {
    .content {
        float: none;
        width: 100%;
    }
    .sidebar {
        width:100%;
    }
}

您可以阅读更多相关信息 here