html - 使用 css 将 div 移动到其上方的行中

Question

我的代码连续有 3 个 div（图库、侧边栏、描述）。HTML 需要保持不变，但我需要使用 CSS 将 .description 放在 .sidebar 下方（.gallery 旁边）而不是 .gallery 下方。 我想像这样移动那个 div 代码：

<div class="product">
  <div class="gallery">
    <img src="https://via.placeholder.com/300" alt="item" />
  </div>
  <div class="sidebar">
    <h3>
      Sidebar
    </h3>
    <p>
      Product price, etc.
    </p>
  </div>
  <div class="description">
    <h3>
      Details
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed eros sem. Aliquam erat volutpat. Phasellus auctor lorem dolor, vitae egestas neque vestibulum sed. Proin sapien purus, faucibus ut elementum eget, consequat sed arcu. Morbi nisl libero,
      molestie eget ligula quis, feugiat iaculis felis. Donec condimentum, felis eu sodales interdum, ex purus convallis augue, quis sollicitudin nibh ex vel lorem. Sed eget semper ipsum, vel dictum lorem. Proin ornare massa elit, non aliquam erat ultricies
      at.
    </p>
  </div>
</div>

.product {
  box-sizing: border-box;
  position: static;
}

.gallery {
  box-sizing: border-box;
  float: left;
  position: relative;
}

.sidebar {
  box-sizing: border-box;
  float: right;
  position: static;
}

.description {
  box-sizing: border-box;
  clear: left;
  float: left;
  position: static;
}

标签： htmlcsslayout

Answer 1

如果您愿意使用浮动，请设置元素的宽度。这是小提琴http://jsfiddle.net/y6g4p7u8/1/ 我已经设置了视觉显示的背景颜色。

.product {
  box-sizing: border-box;
  background: green;
}

.product:before,
.product:after {
  content: " ";
  display: table;
}

.product:after {
  clear: both;
}

.gallery {
  box-sizing: border-box;
  width: 35%;
  float: left;
  background: red;
}

.sidebar {
  box-sizing: border-box;
  float: left;
  width: 65%;
  background: lightblue;
}

.description {
  box-sizing: border-box;
  float: left;
  width: 65%;
  background: yellow;
}