我想使用 css 将图像列表布局到网格中,如下所示:
我的列表 HTML 代码是:
<ul id='feat-products'>
<li><img id='feat-product-1'></li>
<li><img id='feat-product-2'></li>
<li><img id='feat-product-3'></li>
<li><img id='feat-product-banner'></li>
</ul>
我的 CSS 是:
#feat-products ul {
width: 1000px;
height: 400px;
}
#feat-products li {
display: inline-block;
border: solid 1px;
}
#feat-products li:nth-child(1) {
width: 500px;
height: 400px;
}
#feat-products li:nth-child(2) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(3) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(4) {
width: 500px;
height: 200px;
}
不幸的是,这是我从代码中得到的:
使用 CSS 进行布局的最佳方式是什么?我已经能够使用负边距来搞乱并几乎达到我想要的效果,但无法想象这是一个很好的做法。非常感谢任何帮助!
谢谢,
数据库
最佳答案
像这样编辑你的 css 将 float left 添加到 li child 1
#feat-products ul {
width: 1000px;
height: 400px;
}
#feat-products li {
display: inline-block;
border: solid 1px;
}
#feat-products li:nth-child(1) {
width: 500px;
height: 400px;
float:left; //add this to your css
}
#feat-products li:nth-child(2) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(3) {
width: 250px;
height: 200px;
}
#feat-products li:nth-child(4) {
width: 500px;
height: 200px;
}
关于html - 使用 CSS 在列表中布局图像的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37365909/