-1

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

.one 是我希望有一个最小宽度的侧链接栏： 150 像素 .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 分开，但随后窗口最小化，.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;
    }
4

4 回答 4

0 
    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>
于 2018-12-09T03:46:54.833 回答
0

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

<!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>
于 2018-12-09T04:29:04.380 回答
0

确保列处于设定位置（无论屏幕大小）的最佳方法是将它们包装在容器中。

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 -->
于 2018-12-09T05:13:54.827 回答
0

你想要这样的东西吗？

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

如果是这样，那么您只需要 @elbrant 建议的flexbox和容器。另外，这是一个工作示例:)

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

于 2018-12-09T05:39:41.413 回答