Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.04.2018, 23:37   #1
Majestio
Пользователь
 
Аватар для Majestio
 
Регистрация: 12.07.2012
Сообщений: 65
По умолчанию Нужно разместить блоки на bootstrap 4 в секции вот в таком виде

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

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



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

Пока не получается выполнить п.4-7.
Хелп!!!
Мои программные ништякиhttps://majestio.info
Majestio вне форума Ответить с цитированием
Старый 25.04.2018, 07:47   #2
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

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


И да код свой приложите, не уверен что буду его смотреть но все же, может кто другой еще посмотрит
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 25.04.2018, 19:26   #3
Majestio
Пользователь
 
Аватар для Majestio
 
Регистрация: 12.07.2012
Сообщений: 65
По умолчанию

Цитата:
Сообщение от 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>
Но не решена одна деталь - блок А не получается растянуть по высоте
Мои программные ништякиhttps://majestio.info

Последний раз редактировалось Majestio; 25.04.2018 в 19:30.
Majestio вне форума Ответить с цитированием
Старый 25.04.2018, 20:46   #4
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
Сколько бесполезных букв!
ну так не читайте.. и прочитайте для начала как устроена разметка в бустрапе с помощью grid http://getbootstrap.com/docs/3.3/css/ а не изобретайте велосипед из section. Для кого сделали примеры в доке?
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 26.04.2018, 08:09   #5
Majestio
Пользователь
 
Аватар для Majestio
 
Регистрация: 12.07.2012
Сообщений: 65
По умолчанию

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

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

Неужели так сложно при понимании просто привести правильный код?
Мои программные ништякиhttps://majestio.info
Majestio вне форума Ответить с цитированием
Старый 26.04.2018, 09:20   #6
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

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

Если у Вас есть нужда использовать только Flexbox то старайтесь и дальше понять как это сделать т.к мне не интересно, и не имею желания в этом разбираться именно поэтому написал
Цитата:
не уверен что буду его смотреть но все же, может кто другой еще посмотрит
так же попробуйте задать свой вопрос на стоковерфлоу, тут Вам скорее всего ответа не дадут
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 26.04.2018, 19:00   #7
Majestio
Пользователь
 
Аватар для Majestio
 
Регистрация: 12.07.2012
Сообщений: 65
По умолчанию

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

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

Код:
<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>
Вопрос закрыт. Огромное спасибо за участие!
Мои программные ништякиhttps://majestio.info
Majestio вне форума Ответить с цитированием
Старый 26.04.2018, 20:59   #8
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
При всем уважении к Стековервлоу - мой вопрос остался нерешенным.
ну так на английский бы написали в чем сложность.

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

Цитата:
Void 1 день назад
Наверное прежде чем использовать flex-классы бутстрапа правильнее изучить сначала flex
в чем я вприницпе согласен на все 100 с Void.

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

Цитата:
Majestio 1 день назад
Клянусь - изучу!!! )))
без Ваших оценочных суждений где хорошие люди а где нет


Цитата:
Тут явно не бутстрап а flex надо применять.
ну да, ну да
Я часть той силы, что вечно хочет зла, но вечно совершает благо..

Последний раз редактировалось Stanislav; 26.04.2018 в 21:01.
Stanislav вне форума Ответить с цитированием
Старый 26.04.2018, 23:23   #9
Alar
Александр
Администратор
 
Аватар для Alar
 
Регистрация: 28.10.2006
Сообщений: 17,758
По умолчанию

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

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

искать

Цитата:
table to div converter
bootstrap тут не причём. Но всё равно + за решение в теме форума.
Alar вне форума Ответить с цитированием
Старый 26.04.2018, 23:41   #10
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Цитата:
когда и на форуме специалисты есть )
ага просто в очереди стояли чтобы ответить...
Цитата:
соглашусь с тем, что незачем отправлять куда-то
в поиске решения все средства хороши, да и потом автор из без чьих либо наводок пытал счастья на других ресурсах.
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно разместить сайт на хосте (беспалтном) 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