为什么我需要“位置：绝对”来制作并排的 2x2 正方形？

【问题标题】：Why do I need `position: absolute` in making side-by-side 2x2 square?为什么我需要“位置：绝对”来制作并排的 2x2 正方形？
【发布时间】：2012-03-10 09:43:47
【问题描述】：

我在下面的例子中使用了here这个方法。

<!-- vim: set nowrap:-->
<html>
<style type="text/css">
        #titleImg{                 <!--No use in the code but it makes -->
                                   <!--things to work for some odd reason?!-->
                position:absolute; <!--If I remove this, FAILURE --not 2x2.-->
                                   <!--It becomes one-after-another after rem.-->
                                   <!--Why?-->
        }
        li{
                width:190px;
                height:190px;
                display: block;
                float: left;
                margin: 5px;
        }
</style>
<body>
        <center>

                <ul style="width:400px; height:400px; text-align:center;">
                        <li>
                                <img    id="titleImg"
                                src="../Pictures/Logos/logo.png" 
                                style="width:100%;height:100%"> 
                        </li>
                        <li> </li>
                        <li> </li>
                </ul>
        </center>
</body>

【问题讨论】：

标签： css html

【解决方案1】：

我不这么认为。这是我相信您正在尝试完成的更新的 jsFiddle 示例。注意：永远不要使用<center></center> 标签——它们不是好习惯。而是将父级设置为display: block，并将其边距设置为0 auto。

这是新的直播example

还有代码：

HTML

<ul>
    <li> <img src="http://www.woodlands-junior.kent.sch.uk/customs/images/uk.jpg"></li>
    <li> <img src="http://www.crwflags.com/fotw/images/u/us.gif"> </li>
    <li> <img src="http://www.enchantedlearning.com/school/Canada/flagbig.GIF"> </li>
</ul>

CSS

ul {
    display: block; 
    margin: 0 auto;
}

li {
    width:190px;
    height:190px;
    display: block;
    float: left;
    margin: 5px;
    overflow: hidden;
}

【讨论】：