Question

我正在建立一个网站，我试图让div元素坚持到页面的右侧。但是，当我的其他div包含博客文章数据/图像滚动到下一页时，div就会被输入。如何阻止右侧列被输入，同时仍允许我的博客文章条目滚动？

这是我的代码，无论如何都是相关的。对不起，如果这是一个初学者的问题（确实如此）。我很感激能得到的所有帮助。谢谢。

giraffe[grep("(spine_hlfs|ir_dia)", giraffe[, 5]), ];
10       10 0.7401977 0.005703928 0.6778921     ir_dia
20       20 0.7954076 0.331462567 0.7637870     ir_dia
30       30 0.5772808 0.183716142 0.6984193     ir_dia
44       44 0.9701355 0.655736489 0.4917452 spine_hlfs
260     260 0.1893012 0.600140166 0.0390346 spine_hlfs
478     478 0.7655976 0.910946623 0.9779205 spine_hlfs

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

再一次，非常感谢所有回复的人。

Answer 1

您可以使用如下所示的弹性定位

.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上观看this视频。

Answer 2

有许多不同的方法。其中一个更简单的方法是使用：

显示：表细胞

我为这个例子添加了一个中间栏。

.column {
    display:table-cell;
    vertical-align:top;
}

.column.left {
    width:10%;
    background-color:#012C40;
    color:#ffffff;
}
.column.right {
    width:10%;
    background-color:#012C40;
    color:#ffffff;    
}


.postAd {
    min-width:23.5%;
    height:32%;
    background-color:#DAEBF2;
    text-align:center;
    display:inline-block;
    margin:0.5%;
    overflow: auto;
}

.postAd img {
    width:80%;
    height:80%;
}

<div class="column left">
[column left]
</div><!-- .column.left -->

<div class="column middle">
<div class="postAd">
    [image]
    <p>Text here!</p>
</div>
<div class="postAd">
    [image]
    <p>Text here!</p>
</div>
<div class="postAd">
    [image]
    <p>Text here!</p>
</div>
<div class="postAd">
    [image]
    <p>Text here!</p>
</div>
<div class="postAd">
    [image]
    <p>Text here!</p>
</div>
</div><!-- .column.middle -->

<div class="column right">
[column right]
</div><!-- .column.right -->

Answer 3

我认为这就是你要做的事情

左右列应该是位置：固定然后我只是放宽：150px然后右列宽：150px我设置为中间内容边距 - 左：150px和margin-right：150px;这就是全部我用中间内容中的项目来显示flex-warp

此代码：

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>

Answer 4

你应该使用position：fixed;在正确的div。

如何在CSS的页面右侧保留div

4 个答案: