删除 Div 之间的间距

Question

我有三个 div 排成一排。左右两边的div是有图片背景的div，中间的是文字信息。当我希望每个 div 彼此齐平时（填充到屏幕边缘并触摸中心的 div），在每个 div 之间添加间距。我使用 W3.CSS 框架。我尝试添加否定 margins/paddings 但它没有解决发生的问题，而且我似乎无法弄清楚如何摆脱它。

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

删除 Div 之间的间距

Remove Spacing Between Divs

html

css

w3.css