side-by-side 2x2 squareを作るのになぜ `position：absolute`が必要なのですか？

以下の例では、この方法をhereとしています。side-by-side 2x2 squareを作るのになぜ `position：absolute`が必要なのですか？

<!-- 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>

出典

2012-03-10 hhh

私はそう思わないと思います。ここでは、あなたが達成しようとしていると思われるものの更新された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; 
}

出典

2012-03-10 10:20:53 jacktheripper

side-by-side 2x2 squareを作るのになぜ `position：absolute`が必要なのですか？

答えて

関連する問題