gpt4 book ai didi

css - 仅在响应中让 2 个 div 彼此对齐,并在它们之间留有余量

转载 作者:太空宇宙 更新时间:2023-11-04 06:23:00 26 4
gpt4 key购买 nike

我有一些 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;
}

}

}

这是我得到的接近程度的 fiddle :https://jsfiddle.net/dncjhzwg/

在移动 View 中,一切正常。但是只要我将窗口增加到 767 像素以上,它们就会几乎正确显示。问题是我无法让边距发挥作用。

我需要它们每个的左边和右边都没有边距,中间有 10px 的边距。我该如何实现?

最佳答案

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

网格

* {
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;
}
}
<div id="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>


flexbox

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


您也可以使用现有的方法来完成,但需要克服一些问题。主要是因为您使用 inline-block 考虑了 div 元素之间的空白,因此您需要更改 html 以将其删除。之后,只需在右侧 元素上设置一个left-margin

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

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

关于css - 仅在响应中让 2 个 div 彼此对齐,并在它们之间留有余量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55314145/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com