如何在flex容器中将图片定位到右上角并实现响应式布局？

要实现logo固定在右上角、窄屏时内容自动利用logo下方空间的效果，最佳方案是结合浮动和inline-flex调整，无需复杂的Grid模板或媒体查询，步骤如下：

核心思路 #

1. 将logo设置为右浮动，脱离文档流固定在右上角；
2. 给内容容器添加overflow: hidden形成BFC，确保宽屏时内容占据左侧可用空间，不被logo覆盖；
3. 将标签栏（.tag-list）从flex改为inline-flex并设置width: 100%，使其能环绕浮动元素，利用logo下方的空间。

完整代码实现 #

CSS部分 #

.tag {
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 5px;
  background-color: lightblue;
}

.tag-list {
  display: inline-flex; /* 改为inline-flex，允许环绕浮动元素 */
  width: 100%; /* 保持宽度铺满可用空间 */
  column-gap: 8px;
  row-gap: 4px;
  flex-wrap: wrap;
}

.content {
  overflow: hidden; /* 形成BFC，确保宽屏时占据左侧空间 */
}

img {
  float: right;
  width: 150px;
  margin-left: 1rem; /* 增加与内容的间隙 */
  object-fit: contain;
}

HTML部分 #

<div class="content-and-img">
  <img src="https://www.w3schools.com/html/pic_trulli.jpg">
  <div class="content">
    <div class="lane1">
      <div class="lane1-top-row">
        <span class="tag">XXXXX</span>
        <!-- 其他元素 -->
      </div>
      <div class="lane1-bottom-row">
        <span>There is a title here</span>
        <!-- 其他元素 -->
      </div>
    </div>
    
    <div class="lane2">
      <div class="h5">
        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
        <!-- 其他元素 -->
      </div>
      <span>Some shorter Text</span>
    </div>

    <div class="lane3 tag-list">
      <span class="tag">Tag1</span>
      <span class="tag">Tag2</span>
      <span class="tag">Tag3</span>
      <span class="tag">Tag4</span>
      <span class="tag">Tag5</span>
      <span class="tag">Tag6</span>
      <span class="tag">Tag7</span>
      <span class="tag">Tag8</span>
      <span class="tag">Tag9</span>
      <span class="tag">Tag10</span>
    </div>
  </div>
</div>

为什么单纯浮动无效？ #

你之前遇到的问题是：.tag-list作为flex容器是块级元素，默认宽度为100%，会强制占据整行空间，不会环绕浮动的logo。改为inline-flex后，它会以行内元素的特性环绕浮动元素，同时width: 100%保证标签能铺满可用空间，自然利用logo下方的区域。

内容的提问来源于stack exchange，提问作者akcasoy