Question

我的code连续3个div（图库，侧边栏，说明）。 HTML需要保持不变，但是我需要使用CSS在.sidebar（在.gallery旁边）而不是在.gallery之下来获取.description。 I want to move that div like so 代码：

<ul>
  <li>Dashboard</li>
  <li>Assets</li>
  <li>Devices</li>
  <li>More</li>
  <li>Options</li>
</ul>

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

Answer 2

将它们添加到.description完全可以正常工作：

test

但是，最好将带有说明的图片包装在div元素中，然后将它们彼此相对放置

Answer 3

我建议您使用div来包装.sidebar和.description。

然后将display: flex应用于父.product。

HTML

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

CSS

.product{
   display: flex
}

https://jsfiddle.net/blackcityhenry/n9qgvjh6/

Answer 4

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

https://css-tricks.com/snippets/css/complete-guide-grid/ https://caniuse.com/#search=grid

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

从我的头顶开始，就像这样，查看指向CSS技巧的链接。

这是一支展示https://codepen.io/TomCheckley/pen/dQJQBv的笔

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

好吧，如果您不使用网格，实际上它可能不是最简单的！但这将为您提供最灵活的布局选项，而无需更改您的减价。绝对值得尝试一下，因为浏览器的支持已接近全部（除了IE）。您始终也可以逐步增强功能-浮动然后会被flex覆盖，如果您在级联中的flex之后放置网格，则浏览器会在理解的情况下使用它，而在不理解的情况下使用flex。

使用CSS将div移到其上方的行中

4 个答案: