如何使用css将图像放到网格中？
如何使用css将图像放到网格中？
提问于 2017-05-26 23:39:25
我正在尝试创建一个网格风格的图像，并在下面有一个框。有没有更简单的方法来实现这个外观？我正在尝试复制layout shown in this image
目前，我的定位是：Screenshot of what I have now
我希望最右边的图像在右边距处，并且图像之间也有一点间距。
到目前为止我的HTML：
<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="review1">
<a href="#"><img src="images/ramenzundo.jpg" alt="ramenzundo" width="300" height="300" /></a>
<a href="#"><img src="images/charlierabbit.jpg" alt="charlie" width="300" height="300" /></a>
<a href="#"><img src="images/ichiran.jpg" alt="ichiran" width="300" height="300" /></a>
</div>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
<div class="reviews4">
<a href="#"><img src="images/downandout.jpg" alt="down" width="300" height="300" /></a>
<a href="#"><img src="images/speedos.jpg" alt="speedo" width="300" height="300" /></a>
<a href="#"><img src="images/tinygiant.jpg" alt="tiny" width="300" height="300" /></a>
</div>
</section>我的CSS：
#trending {
float:left;
width:960px;
height:1000px;
background-color:#fdded9;
}
#trending h{
position:absolute;
font-size: 30px;
font-family: 'Economica', sans-serif;
color:white;
background-color: black;
}
.review1 {
padding-top:50px;
margin-right: 30px;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}回答 3
Stack Overflow用户
发布于 2017-05-26 23:48:38
像这样的东西？只需确保你知道你在寻找什么样的结构，然后围绕它来构建。
这里每行都有一个容器<div class="rowContainer">，其中包含3个图像，对于每个图像使用<div class="review1">。对于图片下面的内容，请使用：
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
#trending {
margin-top: 100px;
}
.review1 {
border: 1px solid red;
text-align: center;
display: inline-block;
margin: 15px;
}
.rowContainer {
display: flex;
align-items: center;
justify-content: center;
}<section id="trending">
<h> TRENDING REVIEWS </h>
<div class="rowContainer">
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
<div class="rowContainer">
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="ramenzundo" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="charlie" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
<div class="review1">
<a href="#"><img src="http://placehold.it/300x300" alt="ichiran" width="300" height="300" /></a>
<div class="below1">
<p>RAMEN ZUNDO</p>
</div>
</div>
</div>
</section>
Stack Overflow用户
发布于 2017-05-27 00:06:41
试试这个完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style type="text/css">
body{
font-family: 'Economica', sans-serif;
}
.heading{
position:absolute;
font-size: 30px;
color:white;
background-color: black;
}
#trending {
margin: 0 auto;
width:960px;
height:1000px;
background-color:#fdded9;
clear: both;
}
.grid-container{
clear: both;
padding-top: 70px;
}
.grid {
border: 4px solid #444;
overflow: hidden;
float: left;
width: 250px;
margin: 15px 27px;
text-align: center;
}
.grid a{
overflow: hidden;
color: #000;
text-decoration: none;
}
.grid p{
margin: 0;
padding: 20px 0px;
background-color: #C3D7CC;
}
.below1{
vertical-align:bottom;
width:300px;
height:200px;
background-color:black;
}
</style>
</head>
<body>
<section id="trending">
<h1 class="heading"> TRENDING REVIEWS </h1>
<div class="grid-container">
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="ichiran" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="down" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="speedo" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
<div class="grid">
<a href="#">
<img src="http://placehold.it/300x250" alt="tiny" width="250" height="300" />
<p>RAMEN ZUNDO</p>
</a>
</div>
</div>
</section>
</body>
</html>
Stack Overflow用户
发布于 2017-05-27 00:07:41
考虑到您是HTML和CSS的新手-要知道这仍然是最难做好的事情之一。这个问题其实也不是关于图像的。创建一个元素的“网格”布局就是你要做的。图像是and元素-就像div一样-但在本例中，您的元素位于父元素中。
确保您的标记尽可能好，这是第一步：
<ul class='thing-list'>
<li class='thing'>
<a class='link' href='#'>
<figure>
<img src='https://placehold.it/800x1000' alt='thing poster'>
</figure>
<h1 class='title'>Title</h1>
<div class='rating'>
xxx
</div>
</a>
</li>
</ul>这将存在于一些用于布局管理的父元素中。
网格几乎总是由一组数据产生的东西的列表，所以你实际上应该使用一个列表-甚至可以是一个“有序”列表。<ol>
一旦你有了可靠的标记，你就有了很多关于如何运行网格的选择。您选择的大多数内容将取决于您必须支持的浏览器。
使用像这样的站点：https://caniuse.com/#search=grid来检查浏览器对任何CSS内容的兼容性。
- 您可以使列表项
display: inline-block;，它们将排成一列并断到下一行。 - 您可以使用表格布局(将信息放入表格元素中)
- 您可以使用浮动来对齐，然后彼此相邻(确保清除它们的父级-或在短期内将其
overflow: hidden;) - 您可以使用CSS grid (查找)
- ，或者您可以使用使用flexbox，这是我建议的。这样做的唯一缺点是，您可能希望使用预处理器和自动修复程序，以确保不必手动编写棘手的浏览器前缀。(这并不是一个真正的缺点-但如果你没有使用过它，可能会很可怕。)我建议初学者使用codekit -或者使用内置到codepen中的自动修复程序来练习。
我强烈建议你尝试我提到的所有方法-这样你就可以了解每种方法的怪癖。
示例：https://jsfiddle.net/sheriffderek/0egLgmge/
这是一个很好的指南，可以帮助你解决细节问题：https://css-tricks.com/snippets/css/a-guide-to-flexbox
ul {
list-style: none;
margin: 0;
padding: 0;
}
figure {
margin: 0;
}
figure img { /* make img's in figures responsive to their parent */
display: block;
width: 100%;
height: auto;
}
.thing-list {
display: flex;
flex-direct: row;
flex-wrap: wrap;
justify-content: space-between;
}
.thing-list .thing {
flex-basis: 30%;
background: rgba(0,0,0,.1);
margin-bottom: 30px;
}
.thing-list .thing .link {
display: block; /* this has children that are block - so it HAS to be block */
}
.thing-list .thing figure {
/* */
}
.thing-list .thing .title {
margin: 0;
padding: 10px;
font-size: 16px;
background: lightgreen;
color: white;
}
.thing-list .thing .rating {
padding: 10px; /* you can use flexbox for these stars too */
}对于不同的屏幕尺寸-你需要使用@media查询来改变基于屏幕尺寸的样式规则。
你还需要这个：https://www.paulirish.com/2012/box-sizing-border-box-ftw/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44205397
复制相关文章
相似问题
腾讯云开发者
