Question

所以我设法在表行中显示彼此下的两个范围。我通过在span元素上放置float：left和clear：left来做到这一点，所以很好。只有现在这两个跨度显示在图像的左侧，我似乎找不到解决方案。

如何使图像显示在左侧？我尽量避免使用position：absolute（：

我尝试了Internet，但是在那儿找不到我的解决方案。我尝试了Z-index，position，inline-block，flex。

对于该代码，它只是一个表行，其中包含图像和两个跨度。跨度变得清晰：左和浮点：左，因此它们彼此堆叠。

问题所在的图片： here

先谢谢了。

Answer 1

这是您想要的吗？

.page{
      margin: 0 auto;
      width: 300px;
      min-height: 155px;
      box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
  }

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
    </head>
    <body>
        <div class="page">
            <p>Campaign Name</p>
            <hr>
            <div style="display: inline-flex; width: 100%">
                <div style="width: 50%">
                    <img src="https://static.acer.com/up/Resource/Acer/Laptops/Swift_5/Photogallery/20181105/Acer-Swift-5-SF515-51T-Blue-photogallery-02.png" alt="acer" style="height: 100px;">
                </div>
                <div style="width: 50%">
                    <h3>Acer Swift 5</h3>
                    <span style="background-color: #00ab70; color: white; padding: 4px; border-radius: 3px;">FR</span>
                </div>
            </div>
        </div>
    </body>
</html>

在两个跨度的左侧显示图像

1 个答案: