Question

我在网站菜单下有两个div：内容和右内容。右边栏是固定在屏幕右侧的侧边栏，他有200px的内容。内容是网站内容的div，我想要他从屏幕的左侧开始，当它到达正确的内容时停止。有些建议吗？

DIV的HTML代码：

<div id="content">
</div>
<div id="rightcontent">
bla vlaaa
</div>

CSS代码：

#content {
float:left;
position:absolute;
background-color:#ffffff;
height:500px;
}

#rightcontent {
margin-top:5px;
border:1px solid;
border-color:#ffffff;
border-radius:5px;
float:right;
position:relative;
background-color:#D4D3D0;
width:300px;
height:500px;
}

Answer 1

您可以使用包装div作为内容，使用填充或边距来执行此操作。例如，样式表可能如下所示：

.div-content-wrapper { 
    width: 100%;
}
.div-content { 
    margin-right: 200px; 
}
.div-rightsidebar { 
    width: 200px; 
    position: fixed; 
    right: 0; 
    top: 0; 
}

html看起来像这样：

<div class="div-content-wrapper">
    <div class="div-content">
        <h1> This content will not go further than 200px from the right side</h1>
    </div>
    <div class="div-rightsidebar">
        <h4>Right bar content</h4>
    </div>
</div>

右侧边栏可以放在包装内部或外部，这并不重要。

DIV扩展到下一个DIV

1 个答案: