仅使用 CSS 更改项目的位置答案

【问题标题】：Changing position of items using only CSS仅使用 CSS 更改项目的位置
【发布时间】：2021-04-15 00:36:01
【问题描述】：

我不得不使用提供的 HTML 标记并且无法更改它。我想要做的是在“SALE”下方的左侧显示正常价格，即：

售价 5 美元

10 美元

有没有办法解决这个问题？我完全可以将正常价格定位在左侧，但如果存在的话，我希望做一个更有说服力的解决方案吗？

.label {
  float: left;
  margin: 0 5px 0 0;
}

.special-price,
.label {
  color: red;
}

.price {
  display: flex;
  flex-direction: column-reverse;
}

<div class="wrapper">
  <div class="label">
    <!-- Label text can vary i.e. sale, discontinued etc -->
    SALE
  </div>

  <div class="price">
    <div class="regular-price">
      $10
    </div>

    <div class="special-price">
      $5
    </div>
  </div>
</div>

https://jsfiddle.net/3av0zmfc/

【问题讨论】：

你试过margin-left:;或margin-right:;
我只想更改 HTML

标签： css flexbox css-grid

【解决方案1】：

您可以使用 CSS Grid 来获得您想要的结果。注意 .price 类上的 display: contents 已添加，以便 div 不会干扰网格放置；它基本上使 div 在 CSS 放置方面消失了。

除了最新的现代浏览器之外，此代码可能无法运行。

.wrapper {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-gap: 5px 5px;
  width: min-content;
}

.label {
  grid-column: 1/2;
  grid-row: 1/2;
}

.special-price,
.label {
  color: red;
}

.price { display: contents; }

.special-price {
  grid-column: 2/3;
  grid-row: 1/2;
}

.regular-price {
  grid-column: 1/2;
  grid-row: 2/3;
}

<div class="wrapper">
  <div class="label">
    <!-- Label text can vary i.e. sale, discontinued etc -->
    SALE
  </div>

  <div class="price">
    <div class="regular-price">
      $10
    </div>

    <div class="special-price">
      $5
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

请看...

.price {
    display: flex;
}
.special-price {
    margin: -18px 0 0 24px;
}
.label, .special-price {
  color: red;
}

<div class="wrapper">
    <div class="label">
      <!-- Label text can vary i.e. sale, discontinued etc -->
      SALE
    </div>

    <div class="price">
      <div class="regular-price">
        $10
      </div>

      <div class="special-price">
        $5
      </div>
    </div>
  </div>

【讨论】：

【解决方案3】：

所以我玩弄了你的代码，这就是我想出的。

         <div class="wrapper">
   <div class="label">
   <!-- Label text can vary i.e. sale, discontinued etc -->
     SALE
   </div>

     <div class="special-price">
      $5
     </div>

   <div class="price">
     <div class="regular-price">
       $10
     </div>


   </div>
 </div>

看看我是如何交换 5 和 10 的，这就是问题所在。因为这是错误的方式，所以 css 快疯了。我还在 css "align: left" 中添加了一行代码，所以现在它可以工作了。

        .label {
  float: left;
  margin: 0 5px 0 0;
}

.special-price,
.label {
  color: red;
}

.price {
  display: flex;
  flex-direction: column-reverse;
  text-align: left;
}

【讨论】：