时间戳

首页 > 解决方案 > 桌面两列布局，移动一列，儿童不同顺序

html - 桌面两列布局，移动一列，儿童不同顺序

问题描述

display我有一个 CSS 问题，我从设计团队收到的设计使用哪种模式。

该问题涉及网上商店的产品页面。在桌面上，它分为两列（如下所示），有几个不同的部分。在移动端，这些孩子的顺序是完全不同的。

https://imgur.com/t1B5Sqw.jpg

（在移动设备上，顺序是标题、画廊、价格、描述、配置、数据、下载、库存、添加到购物车）

我最初的想法是有一个包装器，然后将每个孩子放在那里，孩子们在移动顺序中，我用这样的东西在桌面上更改顺序：

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, auto);
  grid-column-gap: 1rem;
}

.product-grid__cell {
  font-family: Arial, Helvetica;
  font-weight: bold;
  color: white;
}

.product-grid__title {
  order: 2;
  background: #4e8d27;
}

.product-grid__price {
  order: 4;
  background: #8d2787;
}

.product-grid__data {
  order: 6;
  background: #c71515;
}

.product-grid__description {
  order: 8;
  background: #15c7c5;
}

.product-grid__configuration {
  order: 10;
  background: #f20775;
}

.product-grid__gallery {
  order: 1;
  grid-row: span 6;
  background: #8a8a8a;
}

.product-grid__compability {
  order: 13;
  background: #33f145;
}

.product-grid__downloads {
  order: 15;
  background: #c409e6;
}

.product-grid__stock {
  order: 12;
  background: #f2b207;
}

.product-grid__buttons {
  order: 14;
  background: #0c07f2;
}
a {
  color: white;
}
<div class="product-grid">
  <!-- Title -->
  <div class="product-grid__cell product-grid__title">
    <h1>Title</h1>
  </div>

  <!-- Price -->
  <div class="product-grid__cell product-grid__price">
    <h2>£ 120.50</h2>
  </div>

  <!-- Data -->
  <div class="product-grid__cell product-grid__data">
    <table>
      <tr>
        <td>Weight</td>
        <td>2 kg</td>
      </tr>
      <tr>
        <td>Height</td>
        <td>1.2 m</td>
      </tr>
    </table>
  </div>

  <!-- Description -->
  <div class="product-grid__cell product-grid__description">
    <p>This is a description of the product</p>
  </div>

  <!-- Configuration -->
  <div class="product-grid__cell product-grid__configuration">
    <input type="radio" id="radio-1"> <label for="radio-1">Option 1</label>
    <input type="radio" id="radio-2"> <label for="radio-1">Option 2</label>
  </div>

  <!-- Gallery -->
  <div class="product-grid__cell product-grid__gallery">
    <img src="https://cdn.bike24.net/i/p/0/0/297800_00_c.jpg?v732128dd8d11dbaab0448ad94b547b2f4b8ed8a6">
  </div>

  <!-- Compability -->
  <div class="product-grid__cell product-grid__compability">
    <p>This product goes well with other bikes.</p>
  </div>

  <!-- Downloads -->
  <div class="product-grid__cell product-grid__downloads">
    <ul>
      <li><a href="#!">Download manual</a></li>
      <li><a href="#!">Download license agreement</a></li>
    </ul>
  </div>

  <!-- Stock -->
  <div class="product-grid__cell product-grid__stock">
    <p>4 items left in stock</p>
  </div>

  <!-- Buttons -->
  <div class="product-grid__cell product-grid__buttons">
    <button type="button">Add to cart</button>
  </div>
</div>

但这里的问题是动态高度，product-grid__downloads最终将与 - 总是在同一行product-grid__add-to-cart，这不是我想要的。

使用columns结果也不对。

标签： htmlcss

解决方案

这正是我所尝试的。由于动态容器高度，CSS Grid 或 Flexbox 不是解决方案。我通过侦听 Match Media Query 更改事件的 Javascript 编辑 DOM 来解决它。但我不太喜欢这种解决方案，因为它不是原生 HTML/CSS 解决方案，而且还有其他缺点。所以我知道它是不久前的事，但我很高兴听到你在这里的解决方案，因为这对我来说是非常实际的问题

推荐阅读