Совместите 3 деления рядом с положением: исправлено - PullRequest
Новая
       10

Совместите 3 деления рядом с положением: исправлено

0 голосов
/ 09 декабря 2018

Мне нужно выровнять плавающие 3 div рядом.Ниже приведен мой код, однако все DIV появляются друг под другом, я думаю, это из-за фиксированной позиции.Однако это именно то местоположение, которое мне нужно для моего веб-сайта.

.one - это панель боковых ссылок, которую я хотел бы иметь минимальную ширину: 150 пикселей. Два - для рекламных ссылок и ссылок на инструкции.данные, которые нужно прокручивать.Я пытался май методы, но ничего не работает, может ли помочь jquery?Я хочу, чтобы все были в фиксированном положении.Я также хотел бы, чтобы DIVs оставались такими же по размеру, когда окно было свернуто.

Спасибо 

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

Ответы [ 4 ]

0 голосов
/ 09 декабря 2018

Вы хотели что-то подобное? 

.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 и контейнер, как предложил @elbrant, - это все, что вам нужно.Кроме того, вот рабочий пример :)

Краткое примечание: поскольку оба свойства flex-grow нашего flex-items имеют одинаковое значение, эти два вышеупомянутых элемента всегда будутодинаково занимают своего родителя независимо от его размера.

0 голосов
/ 09 декабря 2018

Мне кажется, вы пытаетесь это сделать: 

<!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>
0 голосов
/ 09 декабря 2018

Лучший способ убедиться, что ваши столбцы находятся в заданном положении (независимо от размера экрана), это заключить их в контейнер.

Изменения 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 -->
0 голосов
/ 09 декабря 2018 
    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>
...