我希望让每个“列”与上面的项目齐平。删除项目行之间的巨大空白。有谁知道我能做些什么？如果屏幕显示在移动设备上或计算机上的窗口很小，则该页面还设计为仅显示一行。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>-->
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.row {
max-width: 1000px;
}
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 0 16px;
}
.container::after, .row::after {
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
</style>
</head>
<body>
<h2>Partners</h2>
<center>
<br>
<div class="row">
<div class="column">
<div class="card">
<img src="https://cdn.discordapp.com/attachments/717875431650361374/756998695609958520/3f47713.png" alt="Cisco8" style="width:100%">
<div class="container">
<h2>Cisco6</h2>
<p class="title">Youtuber</p>
<p>this channel is aimed at people that like linux and like ricing it
i will post videos on linux rices (usually arch or some variant of it),
also ill be doing hacking(security), game programming, programming tutorials on topics,
electronics and microcontrollers - robotics</p>
<p><button class="button" onclick="window.location.href='https://www.youtube.com/channel/UCfhyTQpimu5Bp8Z4Q1rho1A';"><i class="fab fa-youtube"></i> Youtube</button>
<button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
<button class="button" onclick="window.location.href='https://discord.gg/CMC5ta';"><i class="fab fa-discord"></i> Join</button>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://cdn.discordapp.com/avatars/577984014527234078/7ba76229b582f305a92021cba6fabf03.png?size=1024" alt="NaCl10" style="width:100%">
<div class="container">
<h2>NaCl10#6288</h2>
<p class="title">Youtuber</p>
<p>awaiting discription.</p>
<p><button class="button" onclick="window.location.href='/u3';"><i class="far fa-id-badge"></i> Geek Profile</button>
<button class="button" onclick="window.location.href='https://nacl10.com';"><i class="fab fa-youtube"></i> Youtube</button>
<button class="button" onclick="window.location.href='https://github.com/NaCl10';"><i class="fab fa-github"></i> GitHub</button>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://cdn.discordapp.com/attachments/736053153396424734/738152863003312158/C-01.jpg" alt="C/C++" style="width:100%">
<div class="container">
<h2>C/C++</h2>
<p class="title">Discord Community</p>
<p>Hey there! If you like a server about C,C++, and general programming that you might consider to join the C/C++ programming server. Here we have open discussions about programming topics. We also help anybody who needs help in the programming world. If you would like to join here is the invite</p>
<p><button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
<button class="button" onclick="window.location.href='https://discord.gg/qeNWSPt'"><i class="fab fa-discord"></i> Join</button>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://i.pinimg.com/originals/50/05/db/5005dbccb59bc9929274c043b848eb84.gif" alt="coming" style="width:100%">
<div class="container">
<h2>Coming Soon</h2>
<p class="title">Discord Community</p>
<p>pending</p>
<p><button class="button" onclick="window.location.href='/';"><i class="far fa-id-badge"></i> Geek Profile</button>
<button class="button" onclick="window.location.href='https://discord.gg/pending'"><i class="fab fa-discord"></i> Join</button>
</p>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>