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

简单地从中间的孩子中移除width: 600px

＆＃13;

.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);
  "

}

＆＃13;

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

＆＃13;

删除Div之间的间距

1 个答案: