Question

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

.one是一个边栏，我希望最小宽度为150px .two用于广告和说明链接 .three是一个长div，其中填充了需要滚动的数据。我尝试了可能的方法，但jquery不能奏效吗？我希望所有人都处于固定位置。我还希望窗口最小化时DIV保持相同大小。

谢谢

<!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分开，但随后将窗口最小化。.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更改 这些网格区域中的每一个都包含一系列数字，这些数字通过顶部/左侧/底部/右侧指定其边的位置，从而告诉我们列.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

您想要这样的东西吗？

Execute with  stk.removeView(tbrow);stk.removeView(tbrow0);

.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;
}

如果是这样，{@ 3}}和@elbrant建议的容器就是您所需要的。另外，这是flexbox：）

快速注意：由于我们两个flex-items的<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>属性都设置为相同的值，因此上述两个项目无论大小如何都将始终占据其父项。

将3个Divs与位置并排对齐：固定

4 个答案: