html - 与 CSS 网格重叠的段落
问题描述
我正在尝试用纯文本构建一个传记页面,我希望我的文本填满所有空白区域。我想在这个项目中使用 CSS GRID,不想处理浮点数。我将添加一张图片来向您展示我想要的外观以及我的问题在哪里,也许有人会知道解决方法。我没有在这个 HTML 中写所有的行,因为它很多。但是你可以在图片中看到。
我知道我在同一个位置上使用了 2 个元素,但我想向您展示我希望我的文本如何填充空白。
请随时向我展示另一个示例,其中包含使文本填充所有空白的方法。
.bio-content {
display: grid;
margin-top: 10rem;
grid-template-columns: 3fr;
grid-template-rows: 3fr;
}
.bio-content .info-img {
margin-left: 1.5rem;
grid-column: 1/2;
grid-row: 1/2;
}
.bio-content .biography,
.bio-content biography2 {
margin-left: 2rem;
margin-bottom: 0rem;
line-height: 30px;
color: white;
border-left: none;
padding: 0 1rem;
}
.bio-content .biography {
grid-column: 2/4;
grid-row: 1/4;
}
.bio-content .biography2 {
grid-column: 1/4;
grid-row: 3/4;
}
.bio-content table {
grid-row: 2/3;
grid-column: 1/2;
}
/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
<div class="container">
<div class="bio-content">
<div class="info-img">
<img src="/Core/img/bio.jpg" alt="">
<table>
<tr>
<td>NAME:</td>
<td>LAZAR ANGELOV</td>
</tr>
<tr>
<td>HEIGHT:</td>
<td>6"0(180 CM)</td>
</tr>
<tr>
<td>WEIGHT:</td>
<td>195 LBS(88 KG)</td>
</tr>
<tr>
<td>DATE OF BIRTH:</td>
<td>SEPTEMBER 22ND, 1984</td>
</tr>
<tr>
<td>BIRTHPLACE:</td>
<td>SOFIA,BULGARIA</td>
</tr>
</table>
</div>
<div class="biography">
<h1>Biography</h1>
<p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>
<p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>
</div>
<div class="biography2">
<p>
<p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
</div>
</div>
</div>
</main>
编辑编辑我试图删除网格行并定义 .biography2 grid-row:4/4; 并且似乎没有按我的意愿工作......请看最后一张图片。它在图片下方仍然是一个空白区域
解决方案
只需grid-row
从两个传记中删除定义:
.bio-content {
display: grid;
margin-top: 10rem;
grid-template-columns: 3fr;
grid-template-rows: 3fr;
}
.bio-content .info-img {
margin-left: 1.5rem;
grid-column: 1/2;
grid-row: 1/2;
}
.bio-content .biography,
.bio-content biography2 {
margin-left: 2rem;
margin-bottom: 0rem;
line-height: 30px;
color: white;
border-left: none;
padding: 0 1rem;
}
.bio-content .biography {
grid-column: 2/4;
}
.bio-content .biography2 {
grid-column: 1/4;
}
.bio-content table {
grid-row: 2/3;
grid-column: 1/2;
}
/* G-CYR : I added bg to see white text */
body {background:gray;}
<main id="bio">
<div class="container">
<div class="bio-content">
<div class="info-img">
<img src="/Core/img/bio.jpg" alt="">
<table>
<tr>
<td>NAME:</td>
<td>LAZAR ANGELOV</td>
</tr>
<tr>
<td>HEIGHT:</td>
<td>6"0(180 CM)</td>
</tr>
<tr>
<td>WEIGHT:</td>
<td>195 LBS(88 KG)</td>
</tr>
<tr>
<td>DATE OF BIRTH:</td>
<td>SEPTEMBER 22ND, 1984</td>
</tr>
<tr>
<td>BIRTHPLACE:</td>
<td>SOFIA,BULGARIA</td>
</tr>
</table>
</div>
<div class="biography">
<h1>Biography</h1>
<p>Before becoming a bodybuilder and a personal point guards of his class. At the age of 16 he bodies.</p>
<p> He dedicated his life to bodybuilding and since Lazar dominates other bodybuilders with balanced physique and incredible definition.</p>
</div>
<div class="biography2">
<p>
<p>He owns some of the best abs in the world. As a personal trainer he has been able to transform the chance to receive everything needed for reaching the maximum physical potential without using steroids.</p>
</div>
</div>
</div>
</main>
推荐阅读
- python - 正则表达式匹配可选点
- c# - 如何使用衍生 api 或 Autodesk.forge 库 c# 从 dwg 文件中检索图层列表
- c# - RabbitMQ:System.Net.Sockets.SocketException:现有连接被远程主机强行关闭
- ansible - 将 curl PUT 命令转换为 ansible uri
- java - 如何删除 XML 标记中的属性前缀?
- java - 功能
. TOP 不存在 - node.js - mongoose nodejs如何从数据库和用户项目数组中删除项目
- python - 如何获得卡方值作为 scipy.optimize.curve_fit 的输出?
- shell - 如何在docker镜像中替换conf文件中的文本
- prestashop - Prestashop 慢后台 (initContent : 12000ms)