Нужно разместить блоки на bootstrap 4 в секции вот в таком виде - HTML и CSS

Majestio · 24.04.2018, 23:37

Приветствую!

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

А требования таковы:

Ширина A+Б=100% окна
Ширина Б - по своему содержимому
Высота всей секции - по содержимому Б
Высота В - по своему содержимому
Выравнивание А - по середине ширины и высоты
Выравнивание Б - по середине ширины и высоты
Выравнивание В - по середине высоты, по правой стороне ширины

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

Stanislav · 25.04.2018, 07:47

1. А не на бустрапе у Вас пункт 4-7 получается сделать?

Цитата:

Высота В - по своему содержимому

что Вы пишите то? создали вы сайдбар чем Вам будет не по высоте?

Цитата:

Выравнивание А - по середине ширины и высоты

ну так может поизучать html потом во фреймоврки лезть? вот Вам "по середине ширины" (кстати можно писать проще по центру) <center> вот Вам по высоте https://developer.mozilla.org/ru/doc...vertical-align

И да код свой приложите, не уверен что буду его смотреть но все же, может кто другой еще посмотрит

Majestio · 25.04.2018, 19:26

Цитата:

Сообщение от Stanislav

1. А не на бустрапе у Вас пункт 4-7 получается сделать?

Таблицей за 4 мин. Максимум за 5.

Цитата:

Сообщение от Stanislav

что Вы пишите то? создали вы сайдбар чем Вам будет не по высоте?

Мне не нужен сайдбар. Мне нужно форматирование одной секции.

Цитата:

Сообщение от Stanislav

ну так может поизучать html потом во фреймоврки лезть? вот Вам "по середине ширины" (кстати можно писать проще по центру) <center> вот Вам по высоте https://developer.mozilla.org/ru/doc...vertical-align

Сколько бесполезных букв! Я знаю, что я неправ заранее - но и вы мне не помогли. Мне не нужен "велосипед" из CSS, коль я уже завязался на bootstrap. Если только на нем это сделать невозможно в принципе. В чем я не уверен.

Цитата:

Сообщение от Stanislav

И да код свой приложите, не уверен что буду его смотреть но все же, может кто другой еще посмотрит

Получилось вот так:

Код:

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

Но не решена одна деталь - блок А не получается растянуть по высоте

Stanislav · 25.04.2018, 20:46

Цитата:

Сколько бесполезных букв!

ну так не читайте.. и прочитайте для начала как устроена разметка в бустрапе с помощью grid http://getbootstrap.com/docs/3.3/css/ а не изобретайте велосипед из section. Для кого сделали примеры в доке?

Majestio · 26.04.2018, 08:09

Я не нотаций прошу, не RTFM-ов, а реальной помощи. Читал я доки. И то, что мне нужно - должно решаться флекс-разметой, а не пропорциональными колонками из доки приведенного линка. Но не решается. Где-то я что-то не понимаю.

По поводу "велосипеда из секции". Бутстрап может использовать section в качестве контейнера. Поэтому я просто сэкономил на одном вложении.

Неужели так сложно при понимании просто привести правильный код?

Stanislav · 26.04.2018, 09:20

По моему мнению flexbox и grid это не два конкурирующих свойства, они дополняют друг друга. Grid - инструмент позиционирования основных блоков. Flexbox - инструмент позиционирования элементов внутри блоков которые были спозиционированный grid`ом.

Если у Вас есть нужда использовать только Flexbox то старайтесь и дальше понять как это сделать т.к мне не интересно, и не имею желания в этом разбираться именно поэтому написал

Цитата:

не уверен что буду его смотреть но все же, может кто другой еще посмотрит

так же попробуйте задать свой вопрос на стоковерфлоу, тут Вам скорее всего ответа не дадут

Majestio · 26.04.2018, 19:00

При всем уважении к Стековервлоу - мой вопрос остался нерешенным. Но ... нашлись хорошие люди, которые решили вопрос грамотно и без нравоучительной тягомотины.

На всякий случай публикую решение:

Код:

<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&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br>22222&nbsp;22222&nbsp;22222&nbsp;22222<br></div>
  </div>
</div>

Вопрос закрыт. Огромное спасибо за участие!

Stanislav · 26.04.2018, 20:59

Цитата:

При всем уважении к Стековервлоу - мой вопрос остался нерешенным.

ну так на английский бы написали в чем сложность.

Цитата:

Но ... нашлись хорошие люди, которые решили вопрос грамотно и без нравоучительной тягомотины.

ага рассказывайте, особенно это

Цитата:

Void 1 день назад
Наверное прежде чем использовать flex-классы бутстрапа правильнее изучить сначала flex

в чем я вприницпе согласен на все 100 с Void.

Хоть Вы и не любите "нравоучительной тягомитны" напомню Вам пойти исполнить клятву

Цитата:

Majestio 1 день назад
Клянусь - изучу!!! )))

без Ваших оценочных суждений где хорошие люди а где нет

Цитата:

Тут явно не бутстрап а flex надо применять.

ну да, ну да

Alar · 26.04.2018, 23:23

соглашусь с тем, что незачем отправлять куда-то, когда и на форуме специалисты есть )

Цитата:

На всякий случай публикую решение:

подобные решения переделки таблиц в див были со времен создания дивов, даже онлайн сервисы можно нагуглить,

искать

Цитата:

table to div converter

bootstrap тут не причём. Но всё равно + за решение в теме форума.

Stanislav · 26.04.2018, 23:41

Цитата:

когда и на форуме специалисты есть )

ага просто в очереди стояли чтобы ответить...

Цитата:

соглашусь с тем, что незачем отправлять куда-то

в поиске решения все средства хороши, да и потом автор из без чьих либо наводок пытал счастья на других ресурсах.

24.04.2018, 23:37	#1
Majestio Пользователь Регистрация: 12.07.2012 Сообщений: 65	Нужно разместить блоки на bootstrap 4 в секции вот в таком виде Приветствую! Нужно разместить блоки в секции вот в таком виде: А требования таковы: Ширина A+Б=100% окна Ширина Б - по своему содержимому Высота всей секции - по содержимому Б Высота В - по своему содержимому Выравнивание А - по середине ширины и высоты Выравнивание Б - по середине ширины и высоты Выравнивание В - по середине высоты, по правой стороне ширины Пока не получается выполнить п.4-7. Хелп!!! Мои программные ништяки ≡ https://majestio.info

26.04.2018, 08:09	#5
Majestio Пользователь Регистрация: 12.07.2012 Сообщений: 65	Я не нотаций прошу, не RTFM-ов, а реальной помощи. Читал я доки. И то, что мне нужно - должно решаться флекс-разметой, а не пропорциональными колонками из доки приведенного линка. Но не решается. Где-то я что-то не понимаю. По поводу "велосипеда из секции". Бутстрап может использовать section в качестве контейнера. Поэтому я просто сэкономил на одном вложении. Неужели так сложно при понимании просто привести правильный код? Мои программные ништяки ≡ https://majestio.info

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Нужно разместить сайт на хосте (беспалтном)	Viperon	Фриланс	3	06.05.2014 21:26
Текст выводит в таком виде " buratino „ @… "	Женька Good	Помощь студентам	8	12.12.2011 20:02
нужно разместить лого сделанное на Flash	_Nastya_	HTML и CSS	12	03.06.2010 17:16
Как Firefox рассчитывает ширину столбцов вот в таком случае???	Finer	HTML и CSS	3	26.04.2008 16:47