使用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来解决这个问题的最佳方法是什么？我已经能够使用负边距乱搞并几乎实现我想要的东西，但无法想象这是一个好习惯。非常感谢任何协助！

谢谢，

DB

Answer 1

编辑你的css就像这样添加浮动左边的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;
}