将 3 个 Div 与 position:Fixed 并排对齐

Question

我需要并排对齐 3 个 div 的浮动。下面是我的代码，但是所有 DIV 都出现在彼此下面，我猜这是因为固定位置。然而，这是我的网站需要的定位。

.one 是侧链接栏，我希望它的最小宽度为：150px .two 用于广告和说明链接 .three 是一个很长的 div 填充需要可滚动的数据。我尝试了很多方法，但没有任何效果 jquery 有帮助吗？我希望所有人都处于固定位置。我还希望 DIV 在 window 最小化时保持相同的大小。

谢谢

<!DOCTYPE html>
<html>
<head>
<style>
.one {
    height:50px;
    width:34%;
    float:left;
    background-color:red;
    position:fixed;
    }
.two {
    height:50px;
    width:33%;
    float:left;
    background-color:blue;
    position:fixed;
    }   
.three{
    height:50px;
    width:33%;
    float:left;
    background-color:green;
    position:fixed;
    overflow:scroll;
    }   
</style>
</head>
<body>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</body>
</html>

关注编辑：

我能够将 DIVS 分开，但随后 window 被最小化，.two div 浮在 .one div 上。看图 https://postimg.cc/kDQSJpDR

.one {
    height:50px;
    width:33%;
    float:left;
    background-color:red;
    position:fixed;
    min-width:200px;
    }
.two {
    height:50px;
    width:33%;
    margin-left: 34%;
    float:left;
    background-color:blue;
    position:fixed;
    }   
.three{
    height:50px;
    width:33%;
    margin-left: 68%;
    float:left;
    background-color:green;
    position:fixed;
    overflow:scroll;
    }

Answer 1

    please add "margin-left:34%" in .two css and "margin-left:68%" in .three css.

    <!DOCTYPE html>
<html>
<head>
<style>
.one {
    height:50px;
    width:34%;
    float:left;
    background-color:red;
    position:fixed;
    }
.two {
    height:50px;
    width:33%;
    margin-left: 34%;
    float:left;
    background-color:blue;
    position:fixed;
    }   
.three{
    height:50px;
    width:33%;
    margin-left: 68%;
    float:left;
    background-color:green;
    position:fixed;
    overflow:scroll;
    }   
</style>
</head>
<body>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>

</body>
</html>

Answer 2

我相信你正在尝试这样做：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .one, .two, .three {
                top:0;
                position:fixed;
                height:50px;
            }
            .one {
                left:0;
                width:34%;
                background-color:red;
            }
            .two {
                left:34%;
                width:33%;
                background-color:blue;
            }   
            .three{
                left:67%;
                width:33%;
                background-color:green;
                overflow:scroll;
            }   
        </style>
    </head>

    <body>
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </body>

</html>

Answer 3

确保您的列处于设定位置（无论屏幕尺寸如何）的最佳方法是将它们包裹在容器中。

CSS 变化 这些网格区域中的每一个都包含一系列数字，这些数字通过 top/left/bottom/right 指定它们的边，告诉我们列 .one 的边位于位置 1/1/2/2。如果你在一张废纸上画一个矩形，然后从上到下画两条线，这样会更容易理解，这是你的列放置的草稿。根据每一列计算你的行数。对于第一列：矩形的顶部是第 1 行，底部是第 2 行。左边是第 1 行，右边是第 2 行。用 1/1/2/2 表示。

这为您的每个列提供了固定位置。

.one {
    grid-area: one 1/1/2/2;
    height:150px;
    min-width:150px;
    background-color:red;
    }

.two {
    grid-area: two 1/2/2/3;
    height:150px;
    min-width:150px;
    background-color:blue;
    }

.three{
    grid-area: three 1/3/2/4;
    height:150px;
    min-width:150px;
    background-color:green;
    overflow:scroll;
    }

.grid-container {
    display: grid;
    grid-template areas: 'one two three';
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-width: 100%;
    position: center;
    border: solid 1px #000;
    }

 .grid-container > div {
    margin: 5px;
    padding 0;
    }

HTML 变化

<div class="grid-container">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div><!-- end container div -->

Answer 4

你想要这样的东西吗？

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.flex-grow {
  flex: 1 0 0;
}

.p-fixed {
  position: fixed;
}

.w-150px {
  height: 100%;
  min-width: 150px;
  max-width: 150px;
}

.wh-100v {
  height: 100vh;
  width: 100vw;
}

.wh-100p {
  width: 100%;
  height: 100%;
}

.overflow-scroll {
  overflow: scroll;
}

.pink {
  background-color: pink;
}

.red {
  background-color: red;;
}

.green {
  background-color: green;
  color: white;
}

.text-justify {
  text-align: justify;
}

<div class="flex-container justify-start wh-100v p-fixed">
  <div class="w-150px flex-grow pink"></div>
  <div class="wh-100p flex-grow red"></div>
  <div class="wh-100p flex-grow green overflow-scroll text-justify">
    <img src="https://via.placeholder.com/1000x1000"/>
  </div>
</div>

如果是，flexbox and a container as what @elbrant suggested is all that you'll need. Also, here's a working example:)

快速说明：由于我们的弹性项目的 flex-grow 属性设置为相同的值，因此上述两个项目将始终平等地占据其父项，而不管其大小。

将 3 个 Div 与 position:Fixed 并排对齐

Align 3 Divs side by side with position:Fixed

html

css

css-position