html - 网格列未使用完整的行空间,溢出到下一行
问题描述
我正在制作卡片(图像)的布局,并希望它们的大小相同。
我想要每行 4 列,每列 1 张卡片。然后我的下一行将有 4 个,依此类推。
而不是我的卡片占用每行的 4 列,它们只占用 3,然后第四张卡片溢出。
我的这个特定页面的 html 是
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="C:\Users\ADMIN-SURV\Desktop\training_guide\styles.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> -->
<style>
</style>
</head>
<body>
<nav style="display: grid; justify-content: center">
<ul>
<li><a href="../index.html" class="button">Home</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\software.html">Software</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\serverRoom.html">Server Room</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\equipment.html">Our Equipment</a></li>
<li><a href="C:\Users\ADMIN-SURV\Desktop\training_guide\Pages\wires.html">Cables and Wiring</a></li>
<!-- <li><a href="References">References</a></li> -->
</ul>
</nav>
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/activityss.jpg" alt="Activity Doc" />
<div style="justify-items: center;">Unusual Activity</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/accscreenshot.jpg" alt="ACC Doc" />
<div style="justify-items: center;">ACC Guide</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/appearancess.jpg" alt="Appearance Doc" />
<div style="justify-items: center;">Appearance Search</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/encoderss.jpg" alt="Encoder Doc" />
<div style="justify-items: center;">Encoders</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3 card">
<img style="height: 250px; width: fit-content;" src="../Images/facialss.jpg" alt="Facial Doc" />
<div style="justify-items: center;">Facial Recognition</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/focusss.jpg" alt="Focus Doc" />
<div style="justify-items: center;">Focus of Attention</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/motionss.jpg" alt="Motion Doc" />
<div style="justify-items: center;">Unusual motion</div>
</div>
<div style="justify-content: center" class="col-md-3 card">
<img style="height:250px; width: fit-content;" src="../Images/opsss.jpg" alt="Operations Doc" />
<div style="justify-items: center;">MGC Operations</div>
</div>
</div>
<div class="row">
<div style="justify-content: center" class="col-md-3">
<!-- placeholder -->
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div style="justify-content: center" class="col-md-3 card">
</div>
<div class="col-md-3">
<!-- placeholder -->
</div>
</div>
</div>
</body>
</html>
我的CSS(草率)
body {
height: 100%;
/* width: 100%; */
display: grid;
padding-bottom: 5%;
}
.container{
display: grid;
background-color: lightgrey;
background-size: cover;
/* grid-row-gap: 2em; */
/* padding:3em;
grid-auto-rows: 1fr;
grid-template-columns: repeat(4, 1fr);
*/
};
/* .row {
display: grid;
padding:3em;
grid-auto-rows: 1fr;
background-color: lightgray;
background-size: cover;
width: fit-content;
} */
.myborder{
border: lightgray 1px solid;
padding: 2px;
}
.label{
font-weight: bolder;
}
img{
width: auto;
height:auto;
border:none;
position: relative;
padding: 1em;
transition:transform 0.25s ease;
}
/* img:hover{
} */
div {
display: grid;
grid-auto-flow: inherit;
}
#roundImage{
border-radius: 20%;
}
li {
display: inline;
/* border-style: solid;
border-width: thin;
border-radius: 15px; */
padding: 5px;
margin:10px;
}
nav {
padding-top: 10%
}
/* change subtitle to h2 */
.subtitle{
font-size:larger;
text-align: center;
font-weight: bolder;
align-self: center;
justify-content: center;
text-decoration:underline
}
h2{
display: grid;
justify-content: center;
font-size: xx-large;
/* padding-bottom: 1em; */
}
h1{
font-size: xxx-large;
text-align: center;
font-weight: bolder;
display: grid;
align-content: center;
justify-content: center;
/* padding-top: 5%;
padding-bottom: 3%; */
}
#noAtts{
box-shadow: none;
}
.rmImg{
padding:2 em;
border-radius: 15%;
}
#longImage{
height:650px;
width:auto;
padding-left: 50%;
}
.appearanceImg{
height:auto;
width:400px;
position: relative;
}
/* Trying to figure out hover overlay */
/* img {
transition:transform 0.25s ease;
} */
img:hover {
-webkit-transform:scale(1.1); /* or some other value */
transform:scale(1.1);
}
.layout{
grid-template-columns: 25%, 25%, 25%, 25%;
grid-template-rows: auto;
}
.centerImage{
justify-content: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px rounded corners */
margin: .5em;
}
[![layout][1]][1]
[1]: https://i.stack.imgur.com/bXidE.jpg
解决方案
您正在申请margin: .5em;
的.card
也是.col-md-3
取消网格间距。如果您需要该边距,请将.card
s 嵌套在.col-*
s 中:
<div class="container">
<div class="row">
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
<div style="justify-content: center" class="col-md-3">
<div class="card">
<img />
....
</div>
</div>
....
</div>
</div>
推荐阅读
- reactjs - 安装时出错:- npm install -g create-react-app
- c# - SetWindowPlacement function does not setting the console window size properly
- javascript - 如何将每行元素转换为数组,所以我只能选择一个元素,如 data[2]
- python - Regex with negation for extracting web link
- spring-boot - 在 Spring Boot 中使用注释以正确格式放置数据
- java - Java中的x 509证书和X509CertificateHolder有什么区别?
- javascript - AJAX 调用 PHP 函数后禁用 AJAX/Javascript 弹出窗口
- c++ - C++ 模板类给出了“错误:非模板 X 用作模板”
- java - Citrus Simulator 在接收序列化的 xml 数据时抛出 Nullpointer 异常
- c++ - 对于 C++,有 std::strchr() 的任何现代替代品吗?