css 仅在更改屏幕尺寸时调整图像大小的灵活布局

Question

经过大量的研究和反复试验，我谦虚地向你们那里的 CSS 专家寻求帮助。这就是我需要的：

我有两张图片：titlelogo 和 newlogo。

在全屏模式下，newlogo 需要在左边，titlelogo 在右边（这可以与屏幕的整个宽度齐平，也可以“居中”并在两者之间留有空间——只要它“看起来不错”是标准的公司线）。

在调整屏幕大小/移动设备时，titlelogo 需要位于顶部，newlogo 需要位于其下方。现在两个图像都需要居中。

（请不要批评内联 css - 基于不适用于此场景的其他因素，无法使用它。）

这是我所拥有的，这对于全屏来说很好，但是当屏幕尺寸不同时无法居中：

<div style="text-align:center;">
<img src="https://secure.etransfer.com/images/titlelogo.png" style="float:right;height:auto;width: auto\9;overflow-y:visible;" />
<img src="https://secure.etransfer.com/images/newlogo.jpg" style="float:left;height:auto;width: auto\9;" />
</div>

Answer 1

将 flex:wrap 更改为 flex:wrap-reverse 起到了部分作用。由于图像的高度不同，我还必须进行一些其他调整。如果将来有人发现自己处于这种情况，我将把我的最终版本放在这里。 （感谢@Abhitalks 让我走上正轨！）

<div style="display: flex; justify-content: space-between; flex-wrap: wrap-reverse;">
  <img src="newlogo.jpg" style="margin: 0 auto;" />
  <img src="titlelogo.png" style="margin: 0 auto;width:auto;height:1%;align-self:center;" />
</div>

Answer 2

您可以使用 flex 布局。

在全屏模式下，newlogo 需要在左边，titlelogo 在 右（这可以与屏幕的整个宽度齐平，或者 “居中”，中间有空格

这可以通过设置容器div 的样式来完成，如下所示：

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">

justify-content 属性定义了伸缩项如何在伸缩容器的可用宽度内对齐。 space-between 的属性值将通过在项目之间分配剩余宽度 来证明项目。

这将使您的图像分别左右对齐。

在调整屏幕大小/移动设备时，titlelogo 需要位于顶部并且 newlogo 需要在它下面。现在两个图像都需要居中。

要在没有媒体查询的情况下执行此操作，您需要在图像上为左右 margins 添加 auto。像这样：

<img src="..." style="margin: 0 auto;" />

这将使图像在可用宽度内居中。因此，当屏幕宽度太小时（例如在移动设备上），图像会因为容器div 上的flex-wrap: wrap 属性而换行，并且会因为margin: 0 auto 而居中。

演示小提琴：http://jsfiddle.net/abhitalks/Lv4omou7/

演示片段：

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <img src="//placehold.it/128x64/33e" style="margin: 0 auto;" />
  <img src="//placehold.it/128x64/e3e" style="margin: 0 auto;" />
</div>

注意 1：这会产生副作用，即在全屏或更大宽度时图像不会向左和最右对齐。但是，根据您的问题，这是您可以接受的。

注意 2：内联 CSS 不是一个好习惯。尽量远离它。