Question

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

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

复杂的问题来自于我希望左侧边栏的HTML位于正确的div之后，以便当分辨率降低到移动尺寸时，我可以移除浮动并让内容显示在侧边栏之前并且宽度均为100％

＆＃13;

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

＆＃13;

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

＆＃13;

http://jsfiddle.net/a5LLhmo8/

Answer 1

你可以用calc（）来创建它。添加到.content width：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

Answer 2

我想我明白了！

请检查：

@media (max-width: 750px) {
.content {
    float: none;
    width: 100%;
    position: relative;
}
.sidebar {
    width:100%;
    float: ;
    position: absolute;
    bottom: 0;
}

请检查链接，看看这是否是您要找的：

http://jsfiddle.net/a5LLhmo8/2/

我希望这会有所帮助。

Answer 3

您还可以使用flexbox设计在不使用媒体查询的情况下使页面响应，并且可以提供很大的灵活性。

HTML：

<div class="header">Top</div>
<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

CSS：

.header {
    width: 100%;
    background-color: green;
}
.container {
    display: flex;
    flex-wrap: wrap-reverse;
}
.content {
    width: 300px; /* Specify minimum content width */
    background-color: red;
    height: 100px;
    flex-grow: 1;
}
.sidebar {
    background: blue;
    width: 240px;
    height: 100px;
}

这里有关于flexbox设计的一些信息。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

向左移动div到可变宽度，然后在HTML中将div放在响应式设计中

3 个答案: