css - 我的布局不起作用

Question

如何将第 5 个等图像放在前 4 个图像旁边？我需要什么样的 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

你不得不关闭<div id="leftcontainer"></div>

在当前状态下，左容器包含右容器，因此 CSS 没有影响它。除此之外，其他一切都很好。现在可以了。

Answer 2

演示。不要使用太多的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;

}