Question

如何并排放置2个div，两个div都有图像。我希望divs并排保持并且图像自动调整大小，屏幕尺寸。当我缩小屏幕尺寸时，图像会重新定位在另一个之下。下面的html将如何成为CSS？

<div class="container">
  <div class="wrapper">
    <div class="left">
      <img src="img1.png" />
    </div>
    <div class="right">
      <img src="img2.png" />
    </div>
  </div>
</div>

Answer 1

尝试使用bootstrap网格。它可以是这样的。

<div class="col-sm-12">
    <div class="col-sm-6">
        <img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
    </div>
    <div class="col-sm-6">
        <img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">      
    </div>
</div>

Demo

Answer 2

您可以使用css float将包含的元素放在任何一侧

.container {
  width: 100%;
}
.left, .right {
  width: 50%;
  float: left;
}

<div class="container">
  <div class="left"><img src='http://placehold.it/350x150'/></div>
  <div class="right"><img src='http://placehold.it/350x150'/></div>
</div>

Here is a fiddle to show an example of this

如何并排放置两个div

2 个答案: