css - Why do I need `position: absolute` in making side-by-side 2x2 square? -
i use method here in below example.
<!-- vim: set nowrap:--> <html> <style type="text/css"> #titleimg{ <!--no use in code makes --> <!--things work odd reason?!--> position:absolute; <!--if 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>
you don't think. here's updated jsfiddle example of believe trying accomplish. note: never use <center></center>
tags - not practice. instead set parent display: block
, margin 0 auto
.
here new live example
and code:
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; }
Comments
Post a Comment