删除 div 之间的间距答案

【问题标题】：Remove Spacing Between Divs删除 div 之间的间距
【发布时间】：2017-11-21 04:51:52
【问题描述】：

我有三个连续的 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>

【问题讨论】：

标签： html css w3.css

【解决方案1】：

简单地从中间的孩子中删除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>

【讨论】：