如何解决尝试将文本添加到网格
我确定已经问过几次类似的问题,并且我尝试在这里搜索并尝试了一些建议,但是我没有任何运气。而且,我是一个完整的新手。
简而言之,我想在网格中的每个图像下方添加文本,并且每行(3行)中有3张图像。目标是在每个图像的中心下方有一个名字(鸡……。是的,我知道,这都是练习xD)。
.image-container {
width: 100%;
}
.row-one,.row-two,.row-three {
width: 90%;
margin: 10px auto;
text-align: center;
}
.grid-item {
width: 30%;
height: 310px;
display: inline-block;
margin: 15px;
background-size: cover;
background-position: center;
}
#chicken-one {
background-image: url(blah blah blah link);
}
<section class="ourchicken-section">
<h3 class="section-title">Our Chickens</h3>
<div class="image-container">
<div class="row-one">
<div class="grid-item" id="chicken-one"></div>
<div class="grid-item" id="chicken-two"></div>
<div class="grid-item" id="chicken-three"></div>
</div>
</div>
<div class="image-container">
<div class="row-two">
<div class="grid-item" id="chicken-four"></div>
<div class="grid-item" id="chicken-five"></div>
<div class="grid-item" id="chicken-six"></div>
</div>
</div>
<div class="image-container">
<div class="row-three">
<div class="grid-item" id="chicken-seven"></div>
<div class="grid-item" id="chicken-eight"></div>
<div class="grid-item" id="chicken-nine"></div>
</div>
</div>
</section>
以此类推...
我应该在HTML中添加第二个div,然后在每个鸡肉div及其名称下面添加一个<p>
元素吗?我尝试过,但是它使图像不对齐。
也许我太新了,需要学习更多。
解决方法
使用::after
伪元素并说出white-space: nowrap;
在网格下方对齐content
。
这可以工作!
.grid-item::after {
content: " hi there"; //your text here
white-space: nowrap;
}
,
您正在寻找CSS的content
和:after
功能。
content
会将文本或html代码添加到您的类或ID。
:after
将其添加到类或ID的标记之后。值得一提的是,还有一个:before
选项。
#chicken-one:after {
content: "test";
}
#chicken-two:after {
content: "test";
}
#chicken-three:after {
content: "test";
}
或者对于所有人,您都可以执行以下操作:
.grid-item:after {
content: "test";
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。