Html 如何在CSS中保持页面右侧的div_Html_Css_Css Float_Css Position

Html 如何在CSS中保持页面右侧的div

html css

Html 如何在CSS中保持页面右侧的div,html,css,css-float,css-position,Html,Css,Css Float,Css Position,我正在构建一个网站，我正在尝试让一个div元素粘贴到页面的右侧。但是，当我的其他div（包含博客帖子数据/图像）滚动到下一页时，该div就会被输入。如何防止右侧栏被向下输入，同时仍允许我的博客文章滚动这是我的代码，不管怎样都是相关的。我很抱歉，如果这是一个初学者的问题（它真的是）。我感谢所有能得到的帮助。谢谢 .column { float:left; } .column.main { width:70%; min-height:1px; } .column.

我正在构建一个网站，我正在尝试让一个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>

.column{
浮动：左；
}
.column.main{
宽度：70%；
最小高度：1px；
}
.栏边{
宽度：20%；
最小高度：1px；
}
.左栏{
宽度：10%；
背景色：012C40；
身高：85%；
最小宽度：1px；
}
.column.right{
宽度：10%；
背景色：012C40；
身高：85%；
浮动：对；
最小高度：1px；
}
邮递员{
宽度：19%；
身高：32%；
浮动：左；
背景色：DAEBF2；
文本对齐：居中；
显示：内联块；
利润率：.5%；
溢出：自动；
}
·邮递公司{
宽度：80%；
高度：80%；*/
}
这里有文字
这里有文字
这里有文字
这里有文字

首先，感谢所有提出的解决方案！然而，我已经尝试了每一个，我遇到了问题。我的网站顶部有一个导航栏，每个导航栏都会覆盖该导航栏。当我尝试进行调整时，我会遇到与以前相同的问题。如何在不完全破坏网站布局的情况下实现这些功能

再次感谢所有回应的人

您可以使用如下所示的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 */
}

我建议你在youtube上观看视频。

有很多不同的方法。其中一个比较简单的方法是使用：

显示：表格单元格

我为示例添加了一个中间列

.column{
显示：表格单元格；
垂直对齐：顶部；
}
.左栏{
宽度：10%；
背景色：#012C40；
颜色：#ffffff；
}
.column.right{
宽度：10%；
背景色：#012C40；
颜色：#ffffff；
}
邮递员{
最小宽度：23.5%；
身高：32%；
背景色：#DAEBF2；
文本对齐：居中；
显示：内联块；
利润率：0.5%；
溢出：自动；
}
·邮递公司{
宽度：80%；
身高：80%；
}


[左栏]
[图片]
这里有文字
[图片]
这里有文字
[图片]
这里有文字
[图片]
这里有文字
[图片]
这里有文字
[右栏]

我想这就是你想要做的

右-左列应该是位置：固定的，然后我只放宽度：150px，然后右列的宽度：150px，我为中间内容设置了左边的边距：150px，右边的边距：150px；这就是全部我在中间内容中使用的项目显示flex翘曲

此代码：

flex-wrap: wrap;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: left;
justify-content: left;

代码如下：

<!DOCTYPE html>
<html>
<head>
<style>

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}
html {
  height: 100%;
}

.column-left {
    height: 100%;
    width: 15%;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #d6c4ff;
    overflow-x: hidden;
    padding-top: 60px;
}

.column-right {
    height: 100%;
    width: 15%;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    background-color: #d6c4ff;
    overflow-x: hidden;
    padding-top: 60px;
}
.middle-content{
    margin-left: 17%;
        margin-right: 17%;
        height: 100%;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: left;
    }
.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%;*/     
}

</style>
</head>
<body>



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

<!--middle content-->
<div class="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">
    <img src="images/Sunset.JPG" alt="sunset">
    <p>New here!</p>
</div>
<div class="postAd">
    <img src="images/Sunset.JPG" alt="sunset">
    <p>New here!</p>
</div>

</div>

<!--right side content-->

<div class="column-right">
</div>
</body>
</html>


* {
框大小：边框框；
}
身体{
保证金：0；
}
html{
身高：100%；
}
.左栏{
身高：100%；
宽度：15%；
位置：固定；
z指数：999；
排名：0；
左：0；
背景色：#d6c4ff；
溢出x：隐藏；
填充顶部：60px；
}
.右栏{
身高：100%；
宽度：15%；
位置：固定；
z指数：999；
排名：0；
右：0；
背景色：#d6c4ff；
溢出x：隐藏；
填充顶部：60px；
}
.中间内容{
左边缘：17%；
保证金权利：17%；
身高：100%；
填充：0；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
柔性包装：包装；
对齐项目：左；
对正内容：左；
}
邮递员{
宽度：19%；
身高：32%；
浮动：左；
背景色：#DAEBF2；
文本对齐：居中；
显示：内联块；
利润率：.5%；
溢出：自动；
}
·邮递公司{
宽度：80%；
高度：80%；*/
}
这里有文字
这里有文字
这里有文字
这里有文字
新来的
新来的

您应该使用位置：固定；在右边的div.p/p>如果你想要，你可以在两个div中使用，并且相应地调整主体的宽度，使它们不重叠，尽管这可能在调整响应时会产生问题。你也可以用来轻松地创建3列，并且把你的内容放在中间柱中。你有一个活页面托管在某个地方吗？我们会更容易调试它。嗯，也许试试右边的position:absolute。这是一条评论而不是回答。这应该是一条评论。是的，但我不能发表评论，因为我的声誉不超过50。