html - DIV 扩展到下一个 DIV

Question

我在网站菜单下有两个 div：内容和右内容。右内容是固定在屏幕右侧的侧边栏，他有一个 200 像素的内容。内容是网站内容的 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>

右侧边栏可以进入包装器的内部或外部，这并不重要。