让图片在右边，文字在左边

如何解决让图片在右边，文字在左边

这么简单的解释，我一直在尝试将图片移到右侧，将文本移到左侧！我会把代码和网站的图片贴在这里。 提前致谢！ 代码

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;
}`

解决方法

您可以去掉浮动并在 row 类（父 em>) 两个 col-2 类的元素。将图像标签放在空的 col-2 元素内，然后将其移到另一个 col-2 元素后面具有 p、h1 和 small 标签。然后你可以进一步修饰你喜欢的 flex 属性。

display: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>，然后移动图像 标记在空的 col-2 中。每个 col-2 虽然您添加了一个唯一的选择器，但您可以使用 display: grid 来标识您希望首先使用 grid-area 的唯一元素CSS。

grid-template-areas

注意 .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;
}