Question

如何在前4张图像旁放置第5张等图像？我需要什么样的CSS样式规则呢？此刻我有一个漂浮在左边的div：

div#leftcontainer {
    float: left;
    height: 30%;
    width: 100%;
}

这包含2个div，每个4个图像。第二个有右浮动：

.topshops-section-secondcol {
    float: right;
    position: static;
}

目前，2组4张图像只显示在顶部而不是彼此相邻？ jsfiddle：http://jsfiddle.net/Gn7PL/

Answer 1

像这样：jsFiddle here

您必须关闭<div id="leftcontainer"></div>

在当前状态下，左侧容器包含正确的容器，因此CSS没有影响它。除此之外，其他一切都非常好。它现在有效。

Answer 2

DEMO。不要使用太多的CSS和元素。只需要简单的

HTML

<ul>
    <li>
        <img src="https://lh4.googleusercontent.com/-2hC1XUCLbZQ/TpUrgzmXbqI/AAAAAAAAfts/bR367hj_o2w/s90-c-k-no/2011-10-12_11-50-37_HDR.jpg" />
    </li>
     <li>
        <img src="https://lh4.googleusercontent.com/-2hC1XUCLbZQ/TpUrgzmXbqI/AAAAAAAAfts/bR367hj_o2w/s90-c-k-no/2011-10-12_11-50-37_HDR.jpg" />
    </li>


....etc

<强> CSS

li{
    margin:20px;
    list-style-type:none;

}

我的布局不起作用

2 个答案: