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

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

您可以去掉浮点数，并在两个display:flex;类的行类(父级)元素上放置一个。将图像标记放置在空的-2元素中，然后将其移动到具有p、h1和smallE 216标记的其他col 2元素后面。然后，您可以进一步美化您喜欢的弹性属性。

<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中。尽管您添加了一个唯一的选择器，但每个/都可以使用grid-template-areas来确定您希望首先在其CSS中使用网格区域的唯一元素。

.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，通过在布局中添加其唯一的选择器，我们可以非常确切地告诉它哪个元素在布局中的位置。最后，每个子元素都有一个网格区域，它将列出自己的元素.

​

* {
  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>

​