html - 如何在CSS中将div保留在页面的右侧

Question

我正在构建一个网站，我正在尝试让一个 div 元素固定在页面的右侧。 但是，当我的其他包含博客文章数据/图像的 div 滚动到下一页时，div 会向下输入。 如何防止右侧栏被向下输入，同时仍然允许我的博文条目滚动？

这是我的代码，无论如何都是相关的。如果这是一个初学者问题(确实如此)，我很抱歉。我感谢我能得到的所有帮助。 谢谢。

.column {
    float:left;
}

.column.main {
    width:70%;
    min-height:1px;
}

.column.side {
    width:20%;
    min-height:1px;

}

.column.left {
    width:10%;
    background-color:012C40;
    height:85%;
    min-width:1px;
}

.column.right {
    width:10%;
    background-color:012C40;
    height:85%;
    float:right;
    min-height:1px;       
}


.postAd {
    width:19%;
    height:32%;
    float:left;
    background-color:DAEBF2;
    text-align:center;
    display:inline-block;
    margin:.5%;
    overflow: auto;
}

.postAd img {
    width:80%;
    height:80%;*/     
}



<div class="column left">
</div>
<!--middle content-->

<div class="postAd">

    <img src="images/Sunset.JPG" alt="sunset">
    <p>Text here!</p>
</div>

<div class="postAd">

    <img src="images/Sunset.JPG" alt="sunset">
    <p>Text here!</p>
</div>

<div class="postAd">

    <img src="images/Sunset.JPG" alt="sunset">
    <p>Text here!</p>
</div>

<div class="postAd">

    <img src="images/Sunset.JPG" alt="sunset">
    <p>Text here!</p>
</div>

<div class="postAd">
</div>

<!--right side content-->

<div class="column right">
</div>

首先，感谢您提出的所有解决方案!但是，我已经尝试了每一个，但遇到了问题。我的网站顶部有一个导航栏，每个导航栏都会覆盖该栏。当我尝试进行改编时，我遇到了和以前一样的问题。如何在不完全破坏我的网站布局的情况下实现这些？

再次感谢所有回复的人。

Answer 1

你可以像下面这样使用 flex 定位

.parent
{
 display:flex; 
}

.right
{
 flex:1; /*which is equal to 1 portion of width */
}
.left
{
flex:1; /*which is equal to 1 portion of width */
}
.center
{
 flex:8; /*which is equal to 8 portion of width */
}

我建议你看this youtube 上的视频。