固定和流体柱

Question

所以我正在尝试创建一个全宽度的网页，当浏览器从大型显示器缩小到中型时，侧边栏会折叠，然后当显示器是主要内容的宽度时，侧边栏会低于内容（我会用图片解释）。

我创建了这个JSFiddle：http://jsfiddle.net/7N2Jr/2/

其中有一个固定的侧边栏 - 主导航。 还有div.inside包含所有内容。 <article class="one">包含主要内容（新闻文章），而<article class="two">则包含相关帖子，广告等。

我打算创造的是（借口小提琴不足以表明这一点）：

• header的大小相同。
• <article class="one">的宽度为920px或46em（基础为20px）。它将保持此宽度，直到浏览器窗口为46em或更低。
• <article class="two">会填满<article class="one">旁边的浏览器的其余部分。当<article class="two">的宽度达到一定宽度时，它会将内容放入一列。然后当宽度为46em时，它将低于内容。

Answer 1

Check Bootstrap 3.0，它提供了您正在寻找的一切！

作为示例：在这种情况下，您的HTML将如下所示：

<div id='text' class='col-lg-6 col-sm-8 col-xs-12'>
   put your text here
</div>
<div id='images' class='col-lg-6 col-sm-4 col-xs-12'>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
   <div id='img1' class='col-lg-6 col-sm-12 col-xs-6'> ... </div>
</div>

Bootstrap使用12列网格。对于不同大小的屏幕（例如LG，SM，XS），您可以定义DIV在该网格中占用的列数。

Answer 2

与上述人员一样，请尝试使用bootstrap框架。

但是，如果你不想那样，那么只需阅读媒体查询。 你可以从这里开始：http://css-tricks.com/css-media-queries/

Answer 3

<edit>您可以使用float作为flexbox http://jsfiddle.net/7N2Jr/8/ </edit>

的后备广告

---

如果您不介意使用flexbox，仅限年轻浏览器，您可以尝试一下： 的 DEMO

.inside, article.two{
    display:flex;
    padding:1em;
    flex-wrap:wrap;
}
.inside, article {
    background:rgba(0,0,0,0.3);
    margin:1em;
}
article.one {
    flex:3;
    min-width:800px;
}
article.two {
min-width:200px;
}
.filler {
    min-width:200px;
    min-height:80px;
    margin:auto;
    background:black;
    margin:1em;
    align-self:flex-start;
    flex:1;
}

---

在不同的浏览器中查看它，看看它是否符合您的需求。

bootstrap可以用作浏览器的后备，不适用于flex规则。

Answer 4

以下是我的JSFiddle的更新：http://jsfiddle.net/7N2Jr/6/

经过一些修补，它就到了那里。

然后当图片放到右侧时，我会使用media-query删除margins