自适应设计：固定宽度的右侧边栏不会“浮动”

Question

我的网页的主要内容有两列，当视口变小时，该内容将被压缩；当视口变小时，“列”将显示在彼此下方。

它还具有右侧边栏。 边栏必须为固定宽度（下载按钮，社交按钮等）。 它由两部分组成：

当视口太小时（下载按钮），第一部分需要超过主要内容
第二部分需要转到主要内容下方（社交按钮）

我已经完成了大部分的工作，除了右侧栏的第二部分不想在“列”彼此位于下方时完全浮动。 我到目前为止的代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0" />
<style>

#minmax {
    max-width: 940px;
    min-width: 280px;
    margin: 0 auto;
    background-color: #d0ffd0;
}

.right_sidebar_top {
    clear: right;
    width: 220px;
    float: right;
    margin: 0 0 10px 20px;
    background-color: #c0c0ff;
}

.content_wrapper {
    margin: 0 250px 10px 0;
    background-color: #ffff90;
}

.content_left_col {
    width: 48%;
    margin-right: 4%;
    background-color: #e0ffff;
    float: left;
}

.content_right_col {
    width: 48%;
    background-color: #e0e0ff;
    float: left;
}

.right_sidebar_bottom {
    clear: right;
    width: 220px;
    float: right;
    margin: 0 0 10px 20px;
    background-color: #ffe080;
}

@media only screen and (max-width: 799px) {
    .content_left_col {
        width: 100%;
        margin-right: 0;
    }
    .content_right_col {
        width: 100%;
    }
}

@media only screen and (max-width: 599px) {
    .right_sidebar_top {
        clear: both;
        width: 100%;
        float: left;
        margin: 0;
    }
    .content_wrapper {
        margin: 0 0 10px 0;
    }
    .right_sidebar_bottom {
        clear: both;
        width: 100%;
        float: left;
        margin: 0;
    }
}
</style>
</head>
<body>
    <div id="minmax">
        <div class="right_sidebar_top">Lorem ipsum</div>
        <div class="content_wrapper">
            <div class="content_left_col">Lorem ipsum dolor sit amet,
                consectetur adipiscing elit. Aliquam posuere mauris adipiscing neque
                faucibus ultrices nec nec sem. Praesent venenatis hendrerit arcu, in
                sollicitudin risus convallis faucibus.</div>
            <div class="content_right_col">Lorem ipsum</div>
        </div>
        <div class="right_sidebar_bottom">Lorem ipsum</div>
    </div>
</body>

我在这里看到了另一个问题/解决方案，该问题/解决方案使用了右侧边栏的绝对定位，我认为在我的情况下将不起作用，因为它需要位于另一个右侧边栏元素下方。 我花了大约两天的时间来解决这个问题，所以我真的希望有人能提出一个可行的方法！

编辑：

我希望我的目标受众主要是Android移动用户。 对于使用较旧浏览器的少量桌面用户，我可以相对容易地为无响应的960/12 CSS服务，但该解决方案应可在流行的android浏览器上使用。

Answer 1

使用显示：表

这是一个不使用calc的选项，但是您需要使用一个额外的元素，该元素将根据屏幕尺寸隐藏和显示： Demo

在您的侧边栏顶部添加另一个类：

<div class="right_sidebar_top one">Lorem ipsum</div>

然后，用以下内容替换底部的侧边栏项目：

<div class="right_sidebar">
    <div class="right_sidebar_top two">Lorem ipsum</div>
    <div class="right_sidebar_bottom">Lorem ipsum</div>
</div>

然后在媒体查询之外使用此CSS。 它隐藏顶部的侧边栏项目并显示侧边栏分组。 使用display: table-cell可以将一个div设置为一个宽度，并扩展内容：

.content_wrapper, .right_sidebar {
    display: table-cell;
    vertical-align: top;
}
.right_sidebar_top.one {
    display: none;
}
.right_sidebar_top.two{
    display: block;
}

然后在您的599px媒体查询中，将顶部的侧边栏隐藏在分组中，并显示单个顶部的侧边栏项目，然后将其他所有内容都重新设置为display: block以像divs一样工作：

.content_wrapper, .right_sidebar {
    display: block;
}
.right_sidebar_top.one {
    display: block;
}
.right_sidebar_top.two {
    display: none;
}

使用calc（）

如果可以使用calc() ，则可以选择：演示

这使div可以完全按照您的要求进行流动。 可能需要进行一些细微的调整，以使其完全符合您的要求。

.content_wrapper {
    width: calc(100% - 250px); // keeps the right side at 250px for the right sidebar
    background-color: #ffff90;
    float: left; // allows the two right column divs to float next to it
}

//to clear floats
#minmax:after {
    display: table;
    content:'';
    clear: both;
}

.right_sidebar_bottom {
    float: right;
}

@media-query(max-width: 599px){
    .content_wrapper {    
        width: 100%;
    }
}

Answer 2

我根据brouxhaha的答案自己得出了一个答案：

从他基于计算的答案中，我发现问题出在所有浮子没有任何“实际尺寸”。 因此，我重用了他的#maxmin：after思想，使内容区域“不透明”。 同时，这推开了侧边栏，好像现在内容区域旁边显然没有空间了。 为了解决这个问题，我在侧边栏项目上设置了负边距，使它们与“不透明”内容重叠，以便将其滑入到位。 我做到了，在这里可以看到一个例子。

代码中的更改（我想这就是全部）：

#minmax:after {
    display: table;
    content:'';
    clear: both;
}

.right_sidebar_top {
    clear: right;
    width: 220px;
    float: right;
    margin-left: -220px;
    background-color: #c0c0ff;
}

.right_sidebar_bottom {
    width: 220px;
    float: right;
    margin-left: -220px;
    background-color: #ffe080;
    clear: right;
}

这是我将要实现的解决方案。 我不喜欢使用负边距； 这种解决方案似乎不像CSS在帮助我从需求过渡到实现，而更像是围绕CSS工作以完成工作。 因此，如果有人知道该问题的“更清洁”解决方案，请在此处发布，以便其他人（如我）可以学习！

自适应设计：固定宽度的右侧边栏不会“浮动”

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-12-11 23:09:18

解决方案2
0 2013-12-13 12:54:52

自适应设计：固定宽度的右侧边栏不会“浮动”

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-12-11 23:09:18

解决方案2 0 2013-12-13 12:54:52

解决方案1
0 已采纳 2013-12-11 23:09:18

解决方案2
0 2013-12-13 12:54:52