Question

我有一些div，它们要以较小的分辨率（移动设备）彼此对齐，并以2 x 2对齐，并以较大的分辨率（平板电脑和台式机）彼此对齐。

它们是这样生成的：

<div id="container">

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

</div>

CSS是：

#container{
  margin: 0 20px;
  background-color:#ececec;
}
.card{
  display: block;
  position: relative;
  margin-bottom: 15px;
  background-color:#ffffff;
  height:100px;
  border:1px solid #c4c4c4;
}

@media screen and (min-width: 767px) {

    .card{
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    background-color:#ffffff;
    height:100px;
    width: calc(50% - 20px);
    margin:5px;
    border:1px solid #c4c4c4;
  }

}

}

以下是我距离我有多近的小提琴：https://jsfiddle.net/dncjhzwg/

在移动视图中，一切正常。但是，只要将窗口增加到767像素以上，它们就会几乎正确显示。问题是我无法保证利润。

我需要在每个像素的左边和右边都没有空白，在中间有10px的空白。我该如何实现？

Answer 1

更有效的方法是使用grid或flexbox

网格

params.country?.findAll()

* {
  box-sizing: border-box;
}

#container {
  margin: 0 20px;
  background-color: #ececec;
  display: grid;
  grid-gap: 15px;
}

.card {
  position: relative;
  background-color: #ffffff;
  height: 100px;
  border: 1px solid #c4c4c4;
}

@media screen and (min-width: 767px) {
  #container {
    grid-template-columns:1fr 1fr;
  }
}

Flexbox

<div id="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

* {
  box-sizing: border-box;
}

#container {
  margin: 0 20px;
  background-color: #ececec;
  display: flex;
  flex-direction: column;
}

.card {
  flex: 1 1 auto;
  position: relative;
  margin-bottom: 15px;
  background-color: #ffffff;
  height: 100px;
  border: 1px solid #c4c4c4;
}

@media screen and (min-width: 767px) {
  #container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-between;
  }

  .card {
    flex:0 1 auto;
    width: calc(50% - 5px);
  }
}

您也可以使用已有的方法来做到这一点，但是有一些需要克服的怪癖。主要是由于考虑到<div id="container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>元素之间的空白，因此您需要更改html才能将其删除。之后，只需在右侧元素上设置inline-block。

演示在https://jsfiddle.net/kmngh2qs/

和一般性评论：您不必重新定义两个重叠的媒体查询之间保持相同的属性。仅更改属性。

使2个div彼此对齐，并且仅在响应之间留有边距

1 个答案: