Question

我在下面的例子中使用了这个方法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>

Answer 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;
}

为什么我需要'position：absolute`并排制作2x2平方？

1 个答案: