如何在屏幕尺寸改变时并排制作两个div（带有img标签）并且不垂直对齐

Question

如何在屏幕尺寸改变的情​​况下并排制作两个div（带有img标签）并且不垂直对齐

我必须像这样并排显示两张图片：

    <div class="pageView">
        <img id="pagePreview" src="leftImageUrl" class="shadow">
    </div>

    <div class="pageView">
        <img id="pagePreview" nsrc="rightImageUrl" class="shadow">
    </div>

看起来很像这样：

但是当我在智能设备中显示它时 这两个图像垂直对齐：

我怎样才能避免它们垂直对齐，只留下一边安排？

在这种情况下，我还希望显示整个两个图像以适合视点（自动更改图像的大小），如

Answer 1

你必须设置包装它们的容器的最小宽度，让我们假设包装它们的容器是.container，那么你需要编写这样的CSS规则。

.container{
   min-width: "some number which is greater than sum of width of children"
}

这是CSS的fixed width layout练习，它会为您提供水平滚动，因为viewport的宽度小于.container的宽度，不建议使用，但如果它适合它。

Answer 2

您也可以导入bootstrap然后执行此

 <div class = "row"> 
  <div class="pageView col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <img id="pagePreview" src="leftImageUrl" class="shadow">
   </div>

   <div class="pageView col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <img id="pagePreview" nsrc="rightImageUrl" class="shadow">
   </div>
</div>

这样做，无论屏幕大小如何，这两个div都将始终位于同一行。

Answer 3

像这样：

<img src="" class="left">
<img src="" class="right">

.left {
    float: left;
    width: 50%; 
}
.right {
    float: right;
    width: 50%;
}

如果您希望height属性都相同，请设置它们。