html - 删除 Div 之间的间距

Question

我有三个连续的 div。左右div是图片背景div，中间是文字信息。当我希望每个 div 彼此齐平时(填充到屏幕边缘并触摸中心的 div)，在每个 div 之间添加间距。我使用 W3.CSS 框架。我尝试添加负边距/填充，但它无法解决正在发生的事情，而且我似乎无法弄清楚如何摆脱它。

.playhouserentals {
  background-size: cover;
  background-image: url('http://via.placeholder.com/500x500');
  height: 500px;
}

.playhouserentals2 {
  background-size: cover;
  background-image: url('http://via.placeholder.com/500x500');
  height: 500px;
}

.playhousetitle {
  font-weight: bold;
  color: #605e5e;
}

.playhouserentalssect {
  width: 600px;
  height: 500px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: justify;
  background-color: #dbdbdb;
}

.playhouserentalscard {
  width: 400px;
  border: 1px solid #000;
  -webkit-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  "

}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-row w3-container">
  <div class="w3-col l4 playhouserentals">
  </div>
  <div class="w3-col l4">
    <div class="playhouserentalssect">
      <div class="w3-padding-large w3-white playhouserentalscard">
        <h2 class="cursive playhousetitle">Rentals</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, feugiat id tristique suscipit, tincidunt sit amet mauris. Duis eget velit in dolor fermentum placerat aliquet nec lacus. Morbi pulvinar magna placerat, rutrum massa a, eleifend
          turpis.</p>
        <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p>
      </div>
    </div>
  </div>
  <div class="w3-col l4 playhouserentals2">
  </div>
</div>

Answer 1

简单地从中间的 child 中删除 width: 600px

.playhouserentals {
  background-size: cover;
  background-image: url('http://via.placeholder.com/500x500');
  height: 500px;
}

.playhouserentals2 {
  background-size: cover;
  background-image: url('http://via.placeholder.com/500x500');
  height: 500px;
}

.playhousetitle {
  font-weight: bold;
  color: #605e5e;
}

.playhouserentalssect {
  /* width: 600px; --- remove this */
  height: 500px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: justify;
  background-color: #dbdbdb;
}

.playhouserentalscard {
  width: 400px;
  border: 1px solid #000;
  -webkit-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  box-shadow: 10px 10px 5px -4px rgba(0, 0, 0, 0.6);
  "

}

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-row w3-container">
  <div class="w3-col l4 playhouserentals">
  </div>
  <div class="w3-col l4">
    <div class="playhouserentalssect">
      <div class="w3-padding-large w3-white playhouserentalscard">
        <h2 class="cursive playhousetitle">Rentals</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, feugiat id tristique suscipit, tincidunt sit amet mauris. Duis eget velit in dolor fermentum placerat aliquet nec lacus. Morbi pulvinar magna placerat, rutrum massa a, eleifend
          turpis.</p>
        <p class="w3-right"><a href="page/2/rental" class="infolink">Rental Info</a> <span class="fa fa-angle-double-right infoarrow" aria-hidden="true"></span></p>
      </div>
    </div>
  </div>
  <div class="w3-col l4 playhouserentals2">
  </div>
</div>