时间戳

首页 > 解决方案 > 把图片放在右边，把文字放在左边

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

问题描述

所以很快就解释了我一直在尝试将图片向右移动，我的文字向左移动！我将在这里粘贴代码以及网站的图片。提前致谢！ 代码

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

它看起来如何

标签： htmlcssimagealignment

解决方案

您可以摆脱浮动并将 adisplay:flex;放在两个col-2类的行类（parent）元素上。将图像标签放在空的col-2元素内，然后将其移到另一个具有p、h1和small标签的col-2元素后面。然后，您可以根据需要进一步修饰 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>

推荐阅读