Question

我有三个宽度相等的div，第三个div扩展到断点以下的全宽（准确地说是991px），当浏览器宽度低于767px时，所有div都相互堆叠，现在我想要相等的边距（在div和边缘之间）所以请让我知道一个出路。我希望在没有任何框架的情况下实现这一点，只需借助css。

以下是代码：

* {
  box-sizing: border-box;
}
h1 {
  margin: 25px;
  text-align: center;
}
div[class|=col] {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid black;
}
html,
body {
  margin: 15px;
}
.title {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  width: 25%;
  position: absolute;
  top: 0px;
  right: 0px;
  color: black;
  text-align: center;
}
#Title1 {
  background-color: orange;
}
#Title2 {
  background-color: white;
}
#Title3 {
  background-color: green;
}
p {
  background-color: gray;
  width: 100%;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  font-family: Helvetica;
  color: black;
}
.row {
  width: 100%;
}

<div class="row">
  <div class="col-lg-4 col-md-6 ">
    <section id="Title1" class="title">Chicken</section>
    <p>Some text</p>
  </div>

  <div class="col-lg-4 col-md-6">
    <section id="Title2" class="title">Beef</section>

    <p>Some text</p>
  </div>

  <div class="col-lg-4 col-md-12">
    <section id="Title3" class="title">Sushi</section>

    <p>Some text</p>
  </div>
</div>

Answer 1

将类添加到3 div：div-1，div-2，div-3

@media only screen and (max-width:766px) {
     .div-1.div-2.div-3 {
         margin-bottom: 10px;
     }
}

像这样，您可以根据您的要求为特定分辨率添加保证金。

3个相等宽度div之间的边距（响应）

1 个答案: