如何解决如何删除此 HTML 项目中的空白间隙
好的,所以我使用的是我在 W3 Schools 上看到的示例。这是确切的问题,我也能够在他们的网站上复制我的问题。 https://www.w3schools.com/howto/howto_css_portfolio_gallery.asp
我的问题是,根据网格块的大小,我有很大的空白。当网格块的大小都相同时,则没有大的间隙。
如果右侧的网格块较大,则没有间隙。
只有当左边的网格块大于它的右边邻居时才会有一个间隙。
所以我的问题是我该怎么做才能消除这个差距?
* {
Box-sizing: border-Box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Center website */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Add padding BETWEEN each column */
.row,.row>.column {
padding: 8px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 50%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
<!-- MAIN (Center website) -->
<div class="main">
<h1>MYlogo.COM</h1>
<hr>
<h2>PORTFOLIO</h2>
<!-- Portfolio gallery Grid -->
<div class="row">
<div class="column">
<div class="content">
<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum dolor sit amet,tempor prodesset eos no. Temporibus necessitatibus sea ei,at tantas oporteat nam. Lorem ipsum dolor sit amet,tempor prodesset eos no</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<h3>My Work</h3>
<p>Less space used here</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum dolor sit amet,tempor prodesset eos no.</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum dolor sit amet,tempor prodesset eos no.</p>
</div>
</div>
<!-- END GRID -->
</div>
<div class="content">
<img src="/w3images/p3.jpg" alt="Bear" style="width:100%">
<h3>Some Other Work</h3>
<p>Lorem ipsum dolor sit amet,tempor prodesset eos no.</p>
<p>Lorem ipsum dolor sit amet,tempor prodesset eos no.</p>
</div>
<!-- END MAIN -->
</div>
解决方法
据我所知,您的设计目前正在使用 css float: left
选项打破文档流程。
如果您仔细观察,根据您的代码,您的投资组合项目实际上是按正确顺序排列的,顺序是 1. Mountains,2. Lights,3. Nature,4. Mountains。 DOM 已被渲染以用“自然”填充“灯光”之后的空间。这是因为文档是从左到右、从上到下呈现的,考虑到这一点,“自然”占据了整个空间,在呈现“山脉”时会产生间隙。
我建议使用 CSS 网格代替浮动。
检查以下代码:
<div id="grid">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
#grid {
display:grid;
grid-template-column: 1fr 1fr;
column-gap: 30px;
}
.elem {
margin-bottom: 25px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。