Question

我想在768px的照片下放置描述，但它们之间没有白色间隙。有人能帮助我吗

我注意到HTML订单无法更改。最终元素可以被包裹。

我尝试过flexbox和网格布局但没有成功。

以下是我想要实现的最新版本。

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.container div {
  padding: 20px;
}
.container .name {
  background: orange;
}
@media (min-width: 768px) {
  .container .name {
    flex-basis: 100%;
  }
}
.container .photo {
  background: yellow;
}
@media (min-width: 768px) {
  .container .photo {
    flex-basis: 50%;
    padding: 100px 20px;
  }
}
.container .price {
  background: purple;
}
@media (min-width: 768px) {
  .container .price {
    flex-basis: 50%;
    padding: 150px 20px;
  }
}
.container .description {
  background: blue;
  flex-basis: 50%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="name">name</div>
      <div class="photo">photo</div>
      <div class="price">price</div>
      <div class="description">description</div>
    </div>
  </body>
</html>

Answer 1

你真的不需要flexbox布局。一些好的老式花车会做。

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .container {
    position: relative;
  }
}
.container div {
  padding: 20px;
}
.container .name {
  background: orange;
}
.container .photo {
  background: yellow;
}
@media (min-width: 768px) {
  .container .photo {
    float: left;
    width: 50%;
    padding: 100px 20px;
  }
}
.container .price {
  background: purple;
}
@media (min-width: 768px) {
  .container .price {
    float: right;
    width: 50%;
    padding: 150px 20px;
  }
}
.container .description {
  background: blue;
}
@media (min-width: 768px) {
  .container .description {
    float: left;
    clear: left;
    width: 50%;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="name">name</div>
      <div class="photo">photo</div>
      <div class="price">price</div>
      <div class="description">description</div>
    </div>
  </body>
</html>

使用不相等的高度元素删除上面一行产生的空间

1 个答案: