如何沿同一行对齐 span 和 img 元素？ [复制]答案

【问题标题】：How can I align span and img elements along the same line? [duplicate]如何沿同一行对齐 span 和 img 元素？ [复制]
【发布时间】：2019-12-10 08:00:44
【问题描述】：

我正在尝试设计以下内容：

<div>
    <div style="width: 45%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">
        <img src="/assets/images/file@2x.png">
        <span>eb 3p_2D(V1)</span>
    </div>
    <span style="width: 10%">2019-08-08</span>
    <span style="width: 10%">94.41 KB</span>
    <img src="/assets/images/file@2x.png" style="cursor: pointer; color: #237ae4; font-size: 24px;">
</div>

这并没有给我我想要的东西。我的代码执行以下操作并且没有响应：

我怎样才能让它看起来像图片中的那个？

更新

在移动设备中，这就是我想要的 UI

【问题讨论】：

我认为你必须使用引导程序
他不必这样做，但对于初学者来说，这可能是一个从响应式 HTML 开始的好方法。在此处查看 boostrap 文档：getbootstrap.com
你有什么问题？这不是你想要的吗？请更具体一点。
@Jonny：请查看我的更新
我只是猜测你的问题是文本在下面。如果是这样，那么div 会自动换行

标签： html css

【解决方案1】：

您可以使用flexbox 轻松对齐 Y 或 X 轴上的元素。

在您的父元素上使用display: flex, justify-content: space-between 以按照您的示例中的方式对齐所有内容。我还建议您将日期和文件大小的范围扩大一点width，这样文本就不会换行。

您还可以将日期和文件大小范围指定为 min-width，以确保它们始终有足够的空间来呈现其内容。

您还可以将跨度包装在一个 div 中，并使用flexbox 在较小的屏幕上正确地将您的跨度包装在彼此下方。

您现在有一个父级，其中包含 3 个元素 img、div 和 img。

justify-content 和 align-items 将确保这 3 个元素在两个轴上居中。

你的 div 类名 spans 也有 3 个元素，3 个 spans。

justify-content 将确保这 3 个元素在其主轴上均匀分布。 （基于这 3 个元素之间的可用空间。） flex-wrap 会将这些元素包裹在彼此下方，当它们的位置不足以将它们彼此相邻呈现时。

请参阅下面的 sn-ps 以获取工作示例。

.parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  border: 1px solid rgb(220, 220, 220);
  padding: 10px;
}

.image {
  width: 45%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.span {
  width: 20%;
  min-width: 90px;
  white-space: nowrap;
}

.spans {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div class="parent">
  <div>
    <img src="/assets/images/file@2x.png"/>
  </div>
  <div class="spans">
    <span class="image">eb 3p_2D(V1)</span>
    <span class="span">2019-08-08</span>
    <span class="span">94.41 KB</span>
  </div>
  <img src="/assets/images/file@2x.png" style="cursor: pointer; color: #237ae4; font-size: 24px;"/>

</div>

【讨论】：

你的回答很好，除了手机，请查看我更新的问题
您希望您的元素在移动设备上的显示效果如何？我已经更新了我的答案，以展示一个简单的解决方案，可以解决您的移动版本问题。
请查看更新后的问题。我已经发布了我想要的图片
您也可以告诉我如何获得更新的 UI，无需担心桌面外观。我将使用您已经提交的桌面 UI 并在移动设备中隐藏该元素。我将为移动版本使用特定于移动设备的版本。
移动设备中不需要单独的元素。当屏幕太小而无法彼此相邻时，您可以再次使用flexbox 将您的跨度正确地包裹在彼此下方。我已经编辑了我的答案以反映这些变化。

【解决方案2】：

您可以在<div> 中包含元素

您的代码：

<div>
    <div style="width: 45%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">
        <img src="/assets/images/file@2x.png">
            <span>eb 3p_2D(V1)</span>
        </div>
        <span style="width: 10%">2019-08-08</span>
        <span style="width: 10%">94.41 KB</span>
        <img src="/assets/images/file@2x.png" style="cursor: pointer; color: #237ae4; font-size: 24px;">

    </div>

示例解决方案：

<div>
    <div style="width: 45%; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">
        <img src="/assets/images/file@2x.png">
            <span>eb 3p_2D(V1)</span>
        <span style="width: 10%">2019-08-08</span>
        <span style="width: 10%">94.41 KB</span>
        <img src="/assets/images/file@2x.png" style="cursor: pointer; color: #237ae4; font-size: 24px;">
        </div>
    </div>

如果您想要特定的东西，请告诉我

【讨论】：

【解决方案3】：

我在 2 个元素上添加了 flex 以对齐元素并保持它们居中浮动以保持它们的顺序。我还在元素和边框上放置了一点填充。

<div style="border:thin #cccccc solid; padding:3px; width:100%; float:left; display:flex; justify-content: space-between; align-items:center;">
   
   <div style="width:43%;text-overflow: ellipsis; white-space: nowrap; overflow:hidden; padding-left:3px; display:flex;  align-items:center;">
        <img style="float:left;" src="/assets/images/file@2x.png">
            <span style="float:left; margin-left:10%;">eb 3p_2D(V1)</span>
        </div>
        
        <span style="float:left; width: 10%;">2019-08-08</span>
        <span style="float:left; width: 13%;">94.41 KB</span>
        <img src="/assets/images/file@2x.png" style="cursor: pointer; color: #237ae4; font-size: 24px; float:right;  padding-right:3px;">

    </div>

【讨论】：