Версия для печати
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум на Исходниках.RU > HTML, CSS > Нарисовать секцию на bootstrap 4


Автор: JoeUser 24.04.18, 20:04
Приветствую!

Нужно разместить блоки в секции вот в таком виде:

user posted image

А требования таковы:
  1. Ширина A+Б=100% окна
  2. Ширина Б - по своему содержимому
  3. Высота всей секции - по содержимому Б
  4. Высота В - по своему содержимому
  5. Выравнивание А - по середине ширины и высоты
  6. Выравнивание Б - по середине ширины и высоты
  7. Выравнивание В - по середине высоты, по правой стороне ширины

Пока не получается выполнить п.4-7.
Хелп!!!

Автор: JoeUser 25.04.18, 16:01
UPD: Все сделал кроме того, что блок А не могу растянуть вниз. Хеееелп! )))

<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    <!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>

Автор: JoeUser 26.04.18, 16:13
Найденное решение с помощью камарадов с форума по Друпал:

<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
    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>

Вопрос закрыт.

Powered by Invision Power Board (https://www.invisionboard.com)
© Invision Power Services (https://www.invisionpower.com)