调整大小时，使 div 的左边距与另一个 div 保持一致

Question

我遇到的问题是，当我调整浏览器大小时，卡片 div 和卡片 div 的左边距都没有对齐。是否有某种 css 属性或某些 JS 可以使它们在调整大小时保持对齐？

这是我的沙箱 https://codesandbox.io/s/stupefied-christian-tosys?file=/src/styles.css:0-

Answer 1

试一试：

.row {
    display: flex;
    justify-content: space-between;
    margin: 0 80px;
    max-width: 1040px;
    flex-flow: wrap;
}

Answer 2

将 .filter 边距 margin: 0 80px; 添加到您的 .row。然后删除 justify-content: center;。它会松动居中。但是会在左边对齐。为避免正文溢出，您可以将 width: calc(100% - 160px); 设置为您的 .row:

/* ADDED BELOW */
  margin: 0 80px;
  justify-content: unset;
  width: calc(100% - 160px);

之后如果你想让你的卡片更居中，要么在行上使用 justify-content: space-between;，要么在卡片上使用 margin: 10px auto;。

演示：

body {
  margin: 0 auto;

  max-width: 1200px;
}
.row {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  /*ADDED BELOW */
  margin: 0 80px;
  justify-content: unset;
  width: calc(100% - 160px);
}

.filter {
  display: flex;

  margin: 0 80px;
}

.filter select {
  display: inline;
  width: 15rem;
  margin: 10px;
  border-radius: 5px;
}

.card {
  width: 15rem;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.info {
  padding: 15px;
}

.img-container {
  padding-top: 0;
  position: relative;
}

.card img {
  width: 100%;
  object-fit: cover;
}

.price {
  font-weight: bold;
}

<div id="root">
   <div class="App">
      <div class="filter-container">
         <div class="product-listing-wrap">
            <div class="filter">
               <select class="custom-select" id="priceGroup">
                  <option value="1">Under </option>
                  <option value="2"> to 0</option>
                  <option value="3">0 to 0</option>
                  <option value="4">Over 0</option>
               </select>
            </div>
            <div class="row" style="
               margin: 0 80px;
               padding: 10px 0;
               width: calc(100% - 160px);
               ">
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="1"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="2"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="3"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="4"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="5"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="6"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="7"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
               <div class="card">
                  <div class="img-container"><img src="https://images.pexels.com/photos/593171/pexels-photo-593171.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500" alt="8"></div>
                  <div class="info">
                     <p class="info-title"><span><a>placeholder...</a></span></p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

调整大小时，使 div 的左边距与另一个 div 保持一致

Keep left margin of a div inline with another div when resizing

css

window-resize

reactjs