Question

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

我有一个网页（fluidgrid布局），我想要做的是使用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

这些想法很简单，给主容器一个固定的宽度，并将左右边距设置为自动，这样，左边和右边的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; }
}

如何使用css向主网页添加侧栏

1 个答案: