2 个侧边栏 - 内容的每一侧一个

Question

我知道这是一个常见的回答问题，但出于某种原因，我尝试过的其他 Whosebug 帖子都没有奏效。我想在我的网站上有两个侧边栏，主要内容的每一侧都有一个。

我试过使用向右浮动和向左浮动。块与内联块等...我不确定主要内容是否应该浮动。我使用的是最新的 google chrome 浏览器。

HTML:

<!-- Main Page Contents -->
<div id="contents">
    <div id="sidebar">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </div>

    <div id="sidebar2">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </div>

    <div id="mainContents"> 
        <div class="center-div" style="width: 700px;">
            <h1">This is some content</h1>
        </div>
        <div class="center-div" style="width: 900px;">
            <h1>More content</h1>
        </div>
    </div>
</div>

CSS:

 .center-div
 {
 margin: 0 auto;
 padding: 15px;
 background-color: red;

 }



#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}

#sidebar {
position: fixed;
float: left;
width: 200;
margin: 5px;
margin-left: 15px;
padding: 5px;
top: 46px;
margin-top: 20px;

}

#sidebar2 {
position: fixed;
float: right;
width: 50px;
margin: 5px;
padding: 5px;
top: 46px;
margin-top: 20px;
}

#mainContents {
    float: right;
    width: calc(100% - 300px);
    margin: 0px;
    padding: 5px;
    padding-top: 20px;
}

两个侧边栏都出现在左侧的相同位置。我得到的最好的是 sidebar2 浮动在侧边栏的右侧，内容浮动在右侧。

Answer 1

您可以使用 flexbox 来完成此操作 fiddle:

而且我删除了不必要的 css。

 .center-div
 {
 margin: 0 auto;
 padding: 15px;
 background-color: red;

 }



#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
display:flex;
}

#sidebar {
width: 20%;
margin: 5px;
padding: 5px;
margin-top: 20px;

}

#sidebar2 {
width: 20%;
padding: 5px;
margin-top: 20px;
}

#mainContents {
    width: 60%;
    margin: 0px;
    padding-top: 20px;
}

<!-- Main Page Contents -->
<div id="contents">
    <div id="sidebar">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </div>

    

    <div id="mainContents"> 
        <div class="center-div">
            <h1>This is some content</h1>
        </div>
        <div class="center-div" >
            <h1>More content</h1>
        </div>
    </div>
    <div id="sidebar2">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </div>
</div>

注意: html 和 css 中有错误，我已更正：

Answer 2

您的代码几乎是正确的，只需删除 position:fixed 并考虑到您的屏幕为 100%

并提供适当的宽度

.center-div
 {
 margin: 0 auto;
 padding: 15px;
 background-color: red;

 }



#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}

#sidebar {

float: left;
width: 15%;
margin:1%;

padding: 5px;
margin-top: 20px;

}

#sidebar2 {

float:right;
width: 15%;
margin: 1%;
padding: 5px;
top: 46px;
margin-top: 20px;
}

#mainContents {
    float: left;
    width:59%;
    margin: 0px;
    padding: 5px;
    padding-top: 20px;
}

<!-- Main Page Contents -->
<div id="contents">
    <div id="sidebar">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </div>
    <div id="mainContents"> 
        <div class="center-div" >
            <h1>This is some content</h1>
        </div>
        <div class="center-div" >
            <h1>More content</h1>
        </div>
    </div>
    <div id="sidebar2">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </div>


</div>

2 个侧边栏 - 内容的每一侧一个

2 Sidebars - one on each side of content

html

css

sidebar