html - 连续两个可变大小的 img，它们的中间在屏幕上居中，如果太大则水平滚动

Question

我基本上想显示 2 张图像并排显示，并以它们在屏幕中心接触的方式对齐(与图像大小无关)。我能够通过固定定位完成它，但在这种情况下，如果图像对于屏幕“它们的”各自的一侧来说太大，则不会滚动。

HTML:

<div class="left">
    <img src="xyz.jpg"/>
</div>
<div class="right">
    <img src="abc.jpg"/>
</div>

CSS:

.left {
   position: fixed;
   right: calc(50% + 10px); 
   width: auto;
}
.right {
   position: fixed;
   left: calc(50% + 10px); 
   width: auto;
}

FIDDLE

知道如何通过水平滚动获得相同的行为吗？我相信这不能用 position: fixed 来完成。还有别的办法吗？ 谢谢1

Answer 1

您可以使用 float 和宽度的一半 (50%)。由于正文的溢出默认值为自动(滚动)，因此滚动会自动出现。

试试这个，看看它是否是你想要的。

<div class="left">
  <img src="http://i.imgur.com/afd65O1.png" />
</div>
<div class="right">
  <img src="http://i.imgur.com/WTuWgFvl.jpg" />
</div>

和 CSS

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

Fiddle