- 此问题在此处已有答案**：
How to float 3 divs side by side using CSS?（16个答案）
8小时前关门了。
所以我的问题是我不能对卡片元素进行排序。我想在一行中放置3张卡片，这样我的页面看起来会更可爱。在下面的代码中，你可以看到我使用div作为卡片的容器。我还使用了box-sizing：边框，位置：相对和显示：但由于某种原因，内联块不工作，我不知道为什么...已经卡住了几天，想知道如何做，我在哪里做了一些错误的内联块。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cards_container {
margin: 0 auto;
padding: 0 150px;
margin-top: 50px;
width: auto;
font-size: 0;
min-height: auto;
margin-left: auto;
margin-right: auto;
max-width: 2000px;
}
.card {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
position: relative;
display: inline-block;
background: white;
width: 30%;
height: auto;
margin: 0 1%;
margin-bottom: 2%;
border-radius: 10px;
border-style: solid;
border-color: rgb(90, 16, 141);
}
.card:hover {
cursor: pointer;
transform: scale(1.05);
transition: all 0.5s ease;
}
.card_image {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
height: 320px;
width: 100%;
object-fit: contain;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.card_title_p {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
padding: 0;
margin: 0;
text-align: center;
font-size: 19px;
padding: 10px;
padding-bottom: 0;
height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: context-menu;
}
.card_p {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
padding: 0;
margin: 0;
font-size: 16px;
padding: 10px;
height: 140px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 7;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
cursor: context-menu;
}
.card_info {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
text-align: center;
font-size: 19px;
color: rgb(118, 16, 141);
padding: 7px;
margin: 10px;
background-color: rgb(238, 231, 243);
border-radius: 10px;
cursor: pointer;
}
.card_info:hover {
transition: 0.25s;
color: rgb(238, 231, 243);
background-color: rgb(118, 16, 141);
}<div class="cards_container">
<div class="card">
<img src="siteimages/CS3W.jfif" class="card_image">
<p class="card_title_p"><b>HiKu (CS3W)</b></p>
<div class="card_p">Model: CS3W<br> Cell type: Mono-crystalline<br> Power range: 430~455 W<br> Max. system Voltage: 1400V<br> Connector type: T4 or H4 UTX or MC4-EVO2</div>
<div class="card_info" onclick="window.location.assign('ugabuga.html');">Learn more</div>
</div>
</div>
3条答案
按热度按时间nbnkbykc1#
你只有1个div与类卡.添加其他和inline-block工程罚款
nlejzf6q2#
对于这种情况，我建议您使用display flex，让我向您展示：
Display flex将把所有内容放在一行中，然后align-items将使它们在垂直轴上居中。
d7v8vwbk3#
为什么你不把卡片 Package 在div中并把div显示为flex？例如