gpt4 book ai didi

html - 当窗口较小时如何将其更改为列表而不是 2x2 图像正方形

转载 作者:行者123 更新时间:2023-11-28 06:12:54 24 4
gpt4 key购买 nike

我想做的是,当它的窗口/屏幕更小、ipad、手机等更小时,它会让 4 张图片进入一个列表,不再是那个 2x2 的列表

代码

<!Doctype html>
<html>
<head>
<title>DelUZens</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
<link href="main.css" rel="stlesheet" type="text/css">
<style>
.top-left {
top: 10px; left: 10px;
position: absolute;
width: 50%;
max-width: 50%
}

.top-right {
position: absolute;
top: 10px; right: 10px;
width: 50%;
max-width: 50%
}
.bottom-left {
position: absolute;
bottom: 10px; left: 10px;
width: 50%;
max-width: 50%
}
.bottom-right {
position: absolute;
bottom: 10px; right: 10px;
width: 50%;
max-width: 50%
}
</style>
</head>
<body bgcolor="black">
<div class="section-links">
<a href="teams.html" class="top-left">
<img style="width: 100%;" src="icon1.jpg" alt="" z:index=1>
</a>


<a href="store.html" class="top-right">
<img style="width: 100%;" style="height: 50%" src="icon2.jpg" alt="" z:index=1>
</a>


<a href="sponsors.html" class="bottom-left">
<img style="width: 100%;" src="icon4.jpg" alt="" z:index=1>
</a>


<a href="aboutus.html" class="bottom-right">
<img style="width: 100%;" src="icon3.jpg" alt="" z:index=1>
</a>
</div>
</body>
</html>

http://pastebin.com/ffym3bdp

最佳答案

没有足够的代表发表评论

您可以并且可能应该为此使用 Bootstrap 。

关于html - 当窗口较小时如何将其更改为列表而不是 2x2 图像正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36054433/

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