Question

好的，我觉得因为无法解决这个问题而感到愚蠢，我想这只是周一或其他事情。无论如何，我只想做一些类似this as well as the logic I'm using的东西。

。所以我在js fiddle

中写下了正在发生的事情

给大家，希望你能提供帮助。

我知道这将是最让我感到愚蠢的事情之一，但由于某种原因，我无法弄清楚出了什么问题。

HTML5

        <div id="logo-wrapper">
            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>

            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>

            <ul>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
                <li><img src="Img" alt="Image"></li>
            </ul>
        </div>

CSS3

#logo-wrapper {
width: 70%;
margin: 2% auto;
background-color: #2CAD96;
}

#logo-wrapper ul {
margin: 2%;
float: left;
background-color: #FFFFFF;
}

#logo-wrapper ul li {
list-style: none;
display: block;
margin: 2%;
}

#logo-wrapper ul li img{
width: 200px;
height: 100px;
}

Answer 1

ul列表具有默认填充，因此您可能希望使用padding:0;删除它。您还可以将#logo-wrapper的宽度设置为特定值，即使内部图像可能不合适也是如此。因此，您可以使用width:100%;height:auto;缩放图像，也可以不在包装器上设置宽度。

此外，您还需要将display:inline-block;添加到ul和li元素中，并将宽度设置为40％左右。

最后在#logo-wrapper上添加了一个填充物。

编辑：这是JSFiddle http://jsfiddle.net/6AvNM/9/，如果你再调整它，你会得到你的方块：）

Answer 2

首先，您需要清除浮动。在我的演示中，我使用了clearfix类。您也可以将宽度设置为ul和li。我将它们设置为46%，前提是您使用了保证金2%。另外，请确保在UL和LI上重置默认填充。

#logo-wrapper ul li {
    list-style: none;
    display: block;
    float: left;
    margin: 2%;
    width: 46%;
}

http://jsfiddle.net/6AvNM/11/

Answer 3

好吧，我也摆弄了一下，与其他帖子的区别在于：我没有调整大小，你没有指明。同样在@dfsq的解决方案中，图像松散的侧面关系，然而，很好的。（y）的

我这里主要使用display: inline-block来避免清除浮动并给包装器一个高度。由于现在这是静态的，您必须为所有元素提供正确的大小（自动换行）或将<br>放在您希望它包装的位置。

* 
{
box-sizing: border-box;
}

#logo-wrapper 
{
width: 1000px;
margin: 2% auto;
background-color: black;
display:inline-block;
}

#logo-wrapper ul 
{
margin: 2%;
display:inline-block;
background-color: red;
padding: 0;
width : 450px;    
}

#logo-wrapper ul li 
{
list-style: none;
display: inline-block;
margin: 2%;
}

#logo-wrapper ul li img 
{
width: 200px;
height: 100px;
}

jsFiddle： http://jsfiddle.net/6AvNM/12/

简单的HTML代码我有这么艰难的时间

3 个答案: