Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2021, 17:42
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Поставить div после вертикально-выровняного div
Здраствуйте, в процесе выравнивания столкнулся с необходимостю расположить div сразу-снизу-после другого div-а-расположеного-по-центру-вертикально.
Вот пример кода как ето работает:
<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div>
</body>
<style>
    body{
        margin: 0;
        overflow: hidden;
    }
    .wrapper{
        display: table-cell;
        vertical-align: middle;
        width: 100vw;
        height: 100vh;
    }
    .Rectangle{
        width: 100vw;
        height: 20vh;
        background: green;
    }
    .But{
        position: absolute;
        width: 100vw;
        text-align: center;
        font-size: 10vmin;
    }
</style>

Тоесть .Rectangle выровнян по центру вертикально, теперь сразу за ним стоит .But, который никак не выравнивается (он просто идет после предыдущего блока)
Все ето идеально работает пока в клас-обертку не прописать display:flex, display:grid, dispaly:none. Как можно такой метод выравнивания заставить работать даже если клас обертка имеет строчку display:flex.
Вот пример кода который не работает (разница только в 11 строке)
<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div>
</body>
<style>
    body{
        margin: 0;
        overflow: hidden;
		display: flex;
    }
    .wrapper{
        display: table-cell;
        vertical-align: middle;
        width: 100vw;
        height: 100vh;
    }
    .Rectangle{
        width: 100vw;
        height: 20vh;
        background: green;
    }
    .But{
        position: absolute;
        width: 100vw;
        text-align: center;
        font-size: 10vmin;
    }
</style>

Подскажите пожалуйста как можно ето исправить
На картике 1 то как должно быть, на картинке 2 уже все сломано
Изображения:
Тип файла: jpg 1.jpg (3.7 Кб, 4 просмотров)
Тип файла: jpg 2.jpg (3.3 Кб, 3 просмотров)

Последний раз редактировалось fori, 27.01.2021 в 17:44.
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2021, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
    body{
        margin: 0;
        overflow: hidden;
        display: flex;
    }
    .wrapper{
        display: flex;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        flex-direction: column;
    }
    .Rectangle{
        width: 100vw;
        height: 20vh;
        background: green;
    }
    .But{
        width: 100vw;
        text-align: center;
        font-size: 10vmin;
    }
</style>
</head>

<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div>
</body>


</html>
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2021, 18:54
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Спасибо за ответ, но в вашем случае получится что по центру выровнян блок (div+текст), а мне нужно чтоб по центру был выровнян только .Rectangle, а блок с текстом ишел просто за ним снизу.
К примеру на фото 1 центр картинки по вертикали расположен на желтой линии, центр зеленого div-a (красный) немного выше центра картинки, так как вы выравнивали целый контейнер по центру.
мне нужно получить результат где центр зеленого div совпадает с центром картинки, а текст просто идет снизу, какбудто в position: relative
На фото 1 выравнивание по блоку (желтая линия центр документа, красная центр diva) который получился у вас, на фото 2 выравнивание только diva, а текст снизу, который я пытаюсь сделать
Изображения:
Тип файла: jpg 1.jpg (4.9 Кб, 1 просмотров)
Тип файла: jpg 2.jpg (4.0 Кб, 1 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2021, 18:59
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Если увеличить размер текста разница в подходах будет более заметна
1 картика ето то что мне нужно, 2 то что получается у вас
Изображения:
Тип файла: jpg Должно.jpg (6.3 Кб, 2 просмотров)
Тип файла: jpg Получается у вас.jpg (6.6 Кб, 1 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2021, 19:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

fori,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
    body{
        margin: 0;
        overflow: hidden;
        display: flex;
    }
    .wrapper{

        width: 100vw;
        height: 100vh;

    }
    .Rectangle{
        width: 100vw;
        height: 20vh;
        background: green;
        transform: translateY(44vh);
    }
    .But{
        height: 20vh;
        text-align: center;
        font-size: 10vmin;
        transform: translateY(44vh);
        animation: test 5s ease-in-out infinite;
    }
    h1{
        position: fixed;
        height: 1px;
        width: 100vw;
        top: 50%;
        background-color: #FFFF00;
    }
    @keyframes test {
            50% {
                font-size: 40vmin;
            }
    }
</style>
</head>

<body>
<div class="wrapper">
<div class ="Rectangle"></div>
<div class="But">Выйти</div>
</div><h1></h1>
</body>


</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
После загрузки файла, открывает новую страницу, вместо вставки результата в DIV 4y4yHDRA AJAX и COMET 16 13.10.2013 21:31
Не работает JS после подгрузки div через ajax BoB AJAX и COMET 3 09.12.2011 03:03
не закрывается DiV после загрузки в него файла sfumato jQuery 0 02.06.2011 21:05
Аjax запрос формирует div с изображениями, нужно показать после загрузки изображений Khmelevsky AJAX и COMET 2 13.09.2010 23:16
Не могу обратиться к элементам div, после того как они получены через $.ajax igsavenko jQuery 1 31.05.2010 17:53