【问题标题】: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 我已经用媒体更新了我的代码,试试这个
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多