Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[3.136.97.64] |
|
Сообщ.
#1
,
|
|
|
Приветствую!
Нужно разместить блоки в секции вот в таком виде: А требования таковы: Пока не получается выполнить п.4-7. Хелп!!! |
Сообщ.
#2
,
|
|
|
UPD: Все сделал кроме того, что блок А не могу растянуть вниз. Хеееелп! )))
<!doctype html> <html lang="ru"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <title>Hello, world!</title> </head> <body> <section class="d-flex container-fluid p-0 m-0 container-bg"> <div class="container-fluid p-0 m-0"> <div class="d-flex flex-grow-1 flex-column"> <div class="d-flex justify-content-center">Flex item X</div> <div class="d-flex justify-content-end">Flex item Y</div> </div> </div> <div> <img src="http://www.name-list.net/img/portrait/Ololol_1.jpg" class="figure-img img-fluid"> </div> </section> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> </body> </html> |
Сообщ.
#3
,
|
|
|
Найденное решение с помощью камарадов с форума по Друпал:
div class="container-fluid"> <div class="row"> <div class="col d-flex flex-column"> <div class="col d-flex justify-content-center align-items-center">А</div> <div class="d-flex justify-content-end align-items-center">В</div> </div> <div class="col-md-auto d-flex justify-content-center align-items-center">22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br>22222 22222 22222 22222<br></div> </div> </div> Вопрос закрыт. |