如何像这样并排放置3张图片？答案

【问题标题】：How put 3 images side by side like this?如何像这样并排放置3张图片？
【发布时间】：2018-10-26 20:08:40
【问题描述】：

我尝试使用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>

【问题讨论】：

你能发布你试图解决这个问题的代码吗？
请提供您的代码
似乎工作：codeply.com/go/AGFTOt0cLX .. 请解释问题/问题是什么。
感谢大家的回答。

标签： html css bootstrap-4

【解决方案1】：

这应该可以解决问题。

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>

【讨论】：

【解决方案2】：

根据 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>

【讨论】：

【解决方案3】：

这是一个 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>

【讨论】：

那么移动端发生了什么？
在移动设备中，我需要将图像放在一起。
那么当屏幕尺寸小于 425px 时，您可以将外部 div 的 flex-direction 更改为列而不是行
@Asatur 我已经用媒体更新了我的代码，试试这个