gpt4 book ai didi

css - 为什么我需要 `position: absolute` 来制作并排的 2x2 正方形?

转载 作者:太空宇宙 更新时间:2023-11-04 16:02:28 33 4
gpt4 key购买 nike

我用这个方法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>

最佳答案

我想你不会。这是我相信您正在尝试完成的更新的 jsFiddle 示例。注意:永远不要使用 <center></center>标签 - 它们不是好的做法。而是将父级设置为 display: block其 margin 为 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;
}​

关于css - 为什么我需要 `position: absolute` 来制作并排的 2x2 正方形?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9645448/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com