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

Posted 2023-03-05

【中文标题】把图片放在右边，把文字放在左边

【英文标题】：Getting the picture to the right and the text on the left

【发布时间】：2021-08-10 03:36:41

【问题描述】：

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

html：

<!----- offer -----> 
    <div class="offer">
      <div class="small-container">
        <div class="row">
          <div class="col-2"></div>
            <img src="/bilder/exklusiv.png"  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;
`

【问题讨论】：

你试过 bootstrap 4 吗？还是 CSS 网格？或者最简单的方法 - 使用表格？网络中有很多很好的教程和维基

仅供参考：css 规则 .col-2 .offer-img 不适用于显示的标记

@ykostov 感谢您的帮助，这是一个学校项目，所以我们不允许使用引导程序等！

@ykostov 使用表格进行样式设置是一种不好的用途。您永远不应该这样做，因为表格仅用于表格数据（电子邮件模板除外）。最简单的方法是使用浮点数。然而，最实用的工具是 Flexbox。网格远远超出了必要的范围。

我也会使用 flex，它非常容易使用。您可以通过提供 .row display:flex; 来实现您想要的大部分内容。

【参考方案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"  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"  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"  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>