根据您提供的CSS代码,可以通过以下方式来实现一行有两张卡片,并且分别靠在content的左右边缘:
- 将order-content的宽度调整为50%,这样每个卡片将会占据一行的一半宽度。
- 在order-content上添加
margin-left: auto和margin-right: auto,使得每个卡片在水平方向上自动居中对齐。
修改后的CSS代码如下所示:
.content {
width: 40%;
margin: auto;
margin-top: 100px;
margin-bottom: 100px;
position: relative;
top: 100px; /* 与filter-grid的距离 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 全部卡片组块 */
.order-content {
margin-bottom: 10px;
border-radius: 20px;
position: relative;
margin-top: 50px;
/* -webkit-box-shadow: 0px 10px 13px -7px #515151, 7px 11px 22px 5px rgba(111,111,111,0.42);*/
box-shadow: 0 2px 10px #dfdfdf;
align-items:center;
background-color:#fff;
flex-grow:2;
width:50%;
margin-left:auto; /* 左边距自动调整为最大值以实现右对齐 */
margin-right:auto; /* 右边距自动调整为最大值以实现左对齐 */
}
通过以上修改,每个卡片将会在一行中居中对齐,并且分别靠在content的左右边缘。
内容由零声教学AI助手提供,问题来源于学员提问




