如何使两个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

像这样：

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

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

如果您希望两个属性的高度相同，请设置它们。

Answer 2

您还可以导入引导，然后执行此操作

 <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

您必须设置包装它们的容器的最小宽度，让我们假设包装它们的容器是。容器然后您需要编写这样的CSS规则。

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

这是CSS的固定宽度布局实践，它将为您提供一个水平滚动，因为视口的宽度小于。容器，不建议使用，但如果合适，则可以放置。