放置图像的问题

Question

我的问题是将我的图片2个字符放在文字的左侧和右侧。这是一张它看起来如何的图片：

正如你所看到的那样，图像位于黑匣子下方，我希望它们中的每一个都在它旁边，现在由于图像被进一步向下推动，页面上的背景会延长。

这是我的CSS代码：

.support-text {
  width: 600px;
  position: relative;
    margin-left: auto;
    margin-right: auto;
    line-height: -2px;
    margin-bottom: 130px;
    clear: left;

}

.support-text h1 {
  font-size: 30px;
}

.support-text {
  font-size: 23px;
}

.support-img {
  margin-top: -80px;
  margin-bottom: 80px;
  z-index: 1;
}

.ct-pic {
  float: right;
  width: 700px;
  height: 596px;
  bottom: 30px;
  background-image: url('../img/ct.png');

}

.ct-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic:hover {
  -webkit-filter: brightness(180%);
}

.t-pic {
  float: left;
  width: 770px;
  height: 596px;
  margin-left: -60px;
  margin-bottom: -1px;
  background-image: url('../img/t.png');
}

以下是HTML的代码：

<div class="main-wrapper">
    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
    </section>

    <div class="ct-pic">        
    </div>
    <div class="t-pic">
    </div>
</div>

Answer 1

默认情况下，图像以内嵌方式显示（显示在同一行）。

一种解决方法是删除默认显示为块的<div>（从一行开始），另外您可能需要设置适当的宽度。

<div class="main-wrapper">
      <!--ct-pic -->
      <img src="img/ct.png.png" class="ct-pic">

      <!-- blackbox -->
      <img src="img/support-us.png" class="support-img">

      <!--t-pic -->
      <img src="img/t.png.png" class="t-pic">
</div>

Answer 2

这样的事可能有用。您可能需要调整定位和z索引以获得所需的效果，但这应该将所有元素放在正确的位置。

HTML：

<div class="main-wrapper">
    <section class="support-text">
      <img src="img/support-us.png" class="support-img">
      <p> hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
    </section>
</div>

CSS：

.support-img::before {
    content: url('/img/t.png');
}

.support-img::after {
    content: url('/img/ct.png');
}

Answer 3

如果你想确保3个浮动元素保持在彼此旁边，你必须在它们的容器元素（.main-wrapper）上设置一个固定宽度，该宽度至少与所有元素一样大。元素宽度放在一起。

另一种选择是用display: table-cell替换所有3个元素的float属性。这可能是我使用的方法，因为它简单，可靠，并且不需要任何固定宽度。

第三个选项是将float属性替换为display: inline-block;，在容器元素上设置white-space: nowrap;，并在white-space: normal;元素上设置.support-text。

第四个选项是将float属性替换为position: absolute;，然后使用top和left属性手动设置元素的位置。

在所有这些技巧中，我绝对认为第二种技术是最好的。