Question

我知道这是一个普遍回答的问题，但是由于某些原因，我尝试过的其他Stackoverflow帖子均无济于事。我试图在我的网站上有两个侧边栏，主要内容的每一侧都有一个。

我尝试使用向右浮动和向左浮动。块与内联块等...我不确定主要内容是否应该浮动。我正在使用最新的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进行操作，这是有效的小提琴：

并且我也删除了不必要的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

您的代码几乎是正确的，只需移除位置：固定并考虑到屏幕为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 个答案: