把图片放在右边，把文字放在左边

Question

所以简单解释一下，我一直在尝试将图片移到右侧，将文字移到左侧！我将在这里粘贴代码以及网站的图片。 提前致谢！ 代码

HTML：

<!----- offer -----> 
    <div class="offer">
      <div class="small-container">
        <div class="row">
          <div class="col-2"></div>
            <img src="/bilder/exklusiv.png" alt="" class="offer-img">
          <div class="col-2">
            <p>Exclusively Avalible on Sveriges Vintage</p>
            <h1>Smart Band 4</h1>
            <small>Använd av ingen mindre än Amelia Bodehag (Svensk Influencer)
              Fairfeld Univeristy sweatshirten är ett väldigt sällsynt plagg
              från Champion och finns bara hos oss.
            </small>
            <a href="" class="btn"> Buy Now &#8594;</a>
          </div>
        </div>
      </div>
    </div>

CSS：

/* Offer */ 
.offer {
  background: radial-gradient(#fff, #ffd6fa);
  margin-top: 80px;
  padding: 30px 0;
}

.offer-img {
  width: 500px;
  height: 500px;
  float: left;
}

.col-2 .offer-img {
  padding: 50px;
} 

small {
  color:#555;
}`

Answer 1

您可以摆脱浮动并在 row 类（parent ) 两个 col-2 类的元素。将图像标签放在空的 col-2 元素内，然后将其移到另一个 col-2 元素的后面具有 p、h1 和 small 标签。然后你可以根据需要进一步修饰 flex 属性。

<div class="row"><!--/ Add display flex to this elements css /-->  
  <div class="col-2"><!--/ By default this will display in a row /-->
    <p>Exclusively Avalible on Sveriges Vintage</p>
    <h1>Smart Band 4</h1>
    <small>Använd av ingen mindre än Amelia Bodehag (Svensk Influencer)
              Fairfeld Univeristy sweatshirten är ett väldigt sällsynt plagg
              från Champion och finns bara hos oss.
    </small>
    <a href="" class="btn"> Buy Now &#8594;</a>
  </div>
  <div class="col-2"><!--/ By default this will display in a row /-->
    <img src="/bilder/exklusiv.png" alt="" class="offer-img">
  </div>
</div>

.offer {
  background: radial-gradient(#fff, #ffd6fa);
  margin-top: 80px;
  padding: 30px 0;
}

.row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem;
}

.offer-img {
  width: 500px;
  height: 500px;
}

.col-2:nth-of-type(1){
  /* may want to create a dynamic width that will scale to view port here */
  margin-right: 1rem;
}

small {
  color: #555;
}

<div class="offer">
  <div class="small-container">
    <div class="row">      
      <div class="col-2">
        <p>Exclusively Avalible on Sveriges Vintage</p>
        <h1>Smart Band 4</h1>
        <small>Använd av ingen mindre än Amelia Bodehag (Svensk Influencer)
              Fairfeld Univeristy sweatshirten är ett väldigt sällsynt plagg
              från Champion och finns bara hos oss.
            </small>
        <a href="" class="btn"> Buy Now &#8594;</a>
      </div>
      <div class="col-2">
        <img src="/bilder/exklusiv.png" alt="" class="offer-img">
      </div>
    </div>
  </div>
</div>

使用网格：您可以将行设置为display: grid，然后移动图像空 col-2 内的标签。每个 col-2 虽然您添加了一个唯一的选择器，但您可以使用 grid-template-areas 在其 CSS 中使用 grid-area 来识别您希望首先成为哪个唯一元素。

.row {
  display: grid;
  grid-template-rows: 1fr; 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "offerText img"
}

.offerText {
  grid-area: offerText;
}

.img {
  grid-area: img;
}

注意grid-template-columns，基本上你是在告诉代码你希望每个元素都是父元素、网格元素、宽度的一个相等的分数。 grid-template-rows 只有一行，所以我们将其定义为一个分数，因此它将占据所有父元素的高度。然后使用grid-template-areas，我们通过在其中添加唯一的选择器来非常准确地告诉它哪个元素将在布局中的哪个位置。 grid-template-areas: "offerText img" 最后，每个子元素都会有一个网格区域来列出自己的元素。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.offer {
  background: radial-gradient(#fff, #ffd6fa);
  margin-top: 80px;
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: "offerText img";
}

.offerText {
  grid-area: offerText;
  display: flex;
  flex-direction: column;
  align-items: center
}

.img {
  grid-area: img;
  padding-right: 1rem;
  display: flex;
  justify-content: center;
}

.offer-img {
  width: 500px;
  height: 500px;
}

p,
h1,
small {
  width: 100%;
  padding: 1rem;
}

small {
  color: #555;
}

<div class="offer">
  <div class="small-container">
    <div class="row">
      <div class="col-2 img">
        <!-- Move image inside this div -->
        <img src="/bilder/exklusiv.png" alt="" class="offer-img">
      </div>

      <div class="col-2 offerText">
        <p>Exclusively Avalible on Sveriges Vintage</p>
        <h1>Smart Band 4</h1>
        <small>Använd av ingen mindre än Amelia Bodehag (Svensk Influencer)
              Fairfeld Univeristy sweatshirten är ett väldigt sällsynt plagg
              från Champion och finns bara hos oss.
            </small>
        <a href="" class="btn"> Buy Now &#8594;</a>
      </div>
    </div>
  </div>
</div>