html - 使用 CSS 在列表中布局图像的最佳方式

Question

我想使用 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 进行布局的最佳方式是什么？我已经能够使用负边距来搞乱并几乎达到我想要的效果，但无法想象这是一个很好的做法。非常感谢任何帮助!

谢谢，

数据库

Answer 1

像这样编辑你的 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;
}