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

My有3个div（图库、侧边栏、说明）。HTML需要保持不变，但我需要使用CSS在.sidebar（在.gallery旁边）下而不是在.gallery下获取.description。 代码：

边栏

产品价格等。

细节

Lorem ipsum dolor sit amet，是一位杰出的献身者。整型sed-eros-sem。阿利奎姆·埃拉特·帕特。拍卖人洛雷姆·多洛（lorem dolor），前庭生活。在智者的头脑中，我们需要一种新的思维方式。莫比·尼塞尔·利伯罗，
莫莱斯蒂·埃吉特·利古拉·奎斯（molestie eget ligula quis），feugiat iaculis felis。Donec调味品，felis eu sodales interdum，前purus convallis augue，后sollicitudin nib ex vel lorem。这是一个很好的例子。非不平等的精英
在

.产品{
框大小：边框框；
位置：静态；
}
.画廊{
框大小：边框框；
浮动：左；
位置：相对位置；
}
.侧边栏{
框大小：边框框；
浮动：对；
位置：静态；
}
.说明{
框大小：边框框；
清除：左；
浮动：左；
位置：静态；
}

如果您愿意使用浮动，请设置元素的宽度。这是小提琴 我已经为视觉显示设置了背景色

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

---

我建议您使用

div

来包装

.sidebar

和

.description

然后在父级

.product

上应用

display:flex

HTML

<div class="column-wrap">
 <div class="sidebar">..</div>
 <div class="description">...</div>
</div>

---

css网格将是最简单的，现在对浏览器的支持非常好

如果我正确理解您的要求，您可以定义网格模板区域，然后将元素分配到它们需要放置的位置

从我的头顶上看，可能是这样的，请查看css技巧的链接

这是一支钢笔

边栏
知识是一种美德，是一种美德，是一种美德，是一种美德

描述
知识是一种美德，是一种美德，是一种美德，是一种美德

但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责

img{
宽度：100%；
高度：自动；
}
氢{
边际上限：0；
}
p:最后一个孩子{
页边距底部：0；
}
.产品{
最大宽度：90%；
保证金：自动；
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：自动；
网格间距：1.5雷姆；
网格模板区域：“库侧栏”“库描述”；
}
.产品>*{
背景色：#c3cece；
填充：1.5雷姆；
}
.画廊{
网格区域：画廊；
}
.侧边栏{
网格区域：侧栏；
}
.说明{
网格区域：描述；
}

事实上，如果你没有使用网格，它可能不是最简单的！但它将为您提供最灵活的布局选项，而无需更改降价。这绝对值得一试，因为浏览器支持已经接近全面（除了IE）。您也可以逐步增强-然后float会被flex覆盖，如果您在级联中将网格放在flex之后，浏览器将使用它（如果理解），如果不理解，则使用flex。

您愿意使用还是？

<div class="column-wrap">
 <div class="sidebar">..</div>
 <div class="description">...</div>
</div>

.product{
   display: flex
}

<div class="product">
  <div class="gallery">
    <img src="https://lorempixel.com/400/200/cats/1" alt="">
  </div>
  <aside class="sidebar">
    <h2>Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </aside>
  <div class="description">
    <h2>Description</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

img {
  width: 100%;
  height: auto;
}

h2 {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.product {
  max-width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 1.5rem;
  grid-template-areas: 'gallery gallery sidebar' 'gallery gallery description';
}
.product > * {
  background-color: #c3cece;
  padding: 1.5rem;
}

.gallery {
  grid-area: gallery;
}

.sidebar {
  grid-area: sidebar;
}

.description {
  grid-area: description;
}