Как разместить 3 изображения рядом вот так?

Я пытаюсь использовать bootstrap для решения этой проблемы, но безуспешно.

Код:

<div class = "row hall-images">
    <div class = " col-lg-6 col-12"><img src = "image1.png">
    </div>
    <div class = "col-lg-6 col-12">
        <div class = "row">
            <div class = "col-12"><img src = "image2.png">
            </div>
            <div class = "col-12"><img src = "image3.png" >
            </div>
        </div>
    </div>
</div>

Можете ли вы опубликовать код, с помощью которого вы пытались решить эту проблему?

— 26.10.2018 13:31

пожалуйста, предоставьте свой код

— 26.10.2018 13:32

Вроде работает: codeply.com/go/AGFTOt0cLX .. объясните, пожалуйста, в чем проблема.

— 26.10.2018 13:47

спасибо всем за ответы.

— 26.10.2018 14:08

html css bootstrap-4

26.10.2018 13:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

144

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это должно помочь.

div{
  border: 1px solid black;
}

.row{
  height: 200px; /*What ever you want */
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class = "row">
  <div class = "h-100 w-50"></div>
  <div class = "w-50 d-flex flex-column">
    <div class = "h-50 w-100"></div>
    <div class = "h-50 w-100"></div>
  </div>
</div>

26.10.2018 13:40

Ответ принят как подходящий

Это пример с FlexBox, FlexBox действительно полезен для выравнивания элементов, проверьте это здесь: https://www.w3schools.com/css/css3_flexbox.asp

.outer{height: auto;width:500px;display:flex;flex-direction:row;border:1px solid red;}
.inner-left{height: 300px;width:50%;border:1px solid red;}
.fullimg{height:100%;width:100%;border:1px solid red;}
.inner-right{height:300px;width:50%;display:flex;flex-direction:column;border:1px solid red;}
.smallimg{width:100%;height:50%;border:1px solid red;}
@media only screen and (max-width: 425px){.outer{flex-direction:column!important;}}

<div class = "outer">
  <div class = "inner-left">
    <img class = "fullimg" src = "https://www.w3schools.com/images/w3schools_green.jpg" alt = "W3Schools.com">
  </div>
  <div class = "inner-right">
    <img class = "smallimg" src = "https://www.w3schools.com/images/w3schools_green.jpg" alt = "W3Schools.com">
    <img class = "smallimg" src = "https://www.w3schools.com/images/w3schools_green.jpg" alt = "W3Schools.com">
  </div>
</div>

что тогда происходит в мобильном телефоне?

— 26.10.2018 13:48

В мобильном телефоне мне нужно класть изображения друг под друга.

— 26.10.2018 13:49

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

— 26.10.2018 13:50

@Asatur, я обновил свой код, добавив только мультимедиа внутри, попробуйте это

— 26.10.2018 13:53

26.10.2018 13:41

В зависимости от версии BS вам нужно создать такую разметку:

  <div class = "container">
     <div class = "row">
        <div class = "col-md-6 col-sm-12">
           <div>big content</div> 
        </div>
        <div class = "col-md-6 col-sm-12">
           <div class = "row">
             <div class = "col-md-12 col-sm-12"><div>small content 1</div></div>  
             <div class = "col-md-12 col-sm-12"><div>small content 2</div></div>
           </div>
        </div>
    </div>
  </div>

26.10.2018 13:48

Другие вопросы по теме

Добавить 3-й ящик за пределами 2-го

Как включить пользовательские темы материалов в компоненты без дублирования миксинов: mat-core и angular-material-theme

Почему мой нижний div перекрывает другой мой div и не складывается?

Выровняйте div по горизонтали и идеально вписывайтесь в ширину родительского элемента

IFrame заставляет родителя прокручивать до позиции iFrame при загрузке

Фиксированный div с абсолютным расположением значка Font Awesome

Как обрезать цвет фона в правом нижнем углу текста

Как я могу изменить размер шрифта 1 конкретной метки, если у меня есть файл CSS для меток?

Вертикальное выравнивание содержимого абсолютно позиционированного td в таблице

CSS: запретить дочернему элементу с текстовым содержимым увеличивать размер окна

Как разместить 3 изображения рядом вот так?

Ответы 3

Другие вопросы по теме

Похожие вопросы