html - 如何使用CSS向主网页添加侧边栏

Question

这可能是一个直截了当的问题，但我似乎无法解决这个问题，所以欢迎任何帮助。

我有一个网页(流体网格布局)，我想做的是使用 CSS 在主页的两侧添加一个侧边栏。当屏幕大于 1300px 时，我想在两侧显示侧边栏。我希望这些边栏与页面一样高。有没有办法使用 CSS 来做到这一点。

html

<div class="gridContainer clearfix">Mainpage code here </div>

CSS

@media only screen and (min-width:981px){
.gridContainer{width:98%;max-width:1300px;padding-left:1%;padding-right:1%;margin:auto}

欢迎任何帮助

Answer 1

思路很简单，给主容器一个固定的宽度，设置左右边距为auto，这样左右div占据两边剩余的空间。然后，在侧边栏的左侧和右侧添加相等的边距。请参见下面的示例:

HTML

<div class="left-sidebar">side bar content</div>
<div class="gridContainer clearfix">Mainpage code here </div>
<div class="right-sidebar">Side bar content</div>

CSS

 @media only screen and (min-width:1300px)
{
   .left-sidebar  { display:inline-block; margin-right:10px; }
   .gridContainer { display:inline-block; width:75%; margin-left:auto; margin-right:auto; border:1px solid black; }
   .right-sidebar { display:inline-block; margin-left:10px; }
}