gpt4 book ai didi

css - 带有 CSS 问题的简单图库在 block 中显示

转载 作者:太空宇宙 更新时间:2023-11-03 19:16:38 24 4
gpt4 key购买 nike

所以我想出了这个代码:

<head>
<style type="text/css">
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff; width:auto; height:auto}

</style>
</head>
<body>

<div class="img">
<a target="_blank" href="a"><img src="images/p1.jpg" alt="a" width="110" height="90" /></a>
</div>
<div class="img">
<a target="_blank" href="b"><img src="images/p2.jpg" alt="b" width="110" height="90" /></a>
</div>
<div class="img">
<a target="_blank" href="c"><img src="images/p3.jpg" alt="c" width="110" height="90" /></a>
</div>
<div class="img">
<a target="_blank" href="d"><img src="images/p4.jpg" alt="d" width="110" height="90" /></a>
</div>

</body>
</html>

我的目标是制作一个简单的画廊,当鼠标放在上面时图像会放大,这一切都很好,但现在我想制作精确的尺寸 - 我的意思是一个盒子,可以说是 600x300 像素,因为现在它需要整个监视器,我想我需要调整 CSS,但不知道如何调整。

最佳答案

如果你想将你的图像包装在容器 div 中,请执行以下操作:

<div id="container">
<div class="img">
...
</div>
...
</div>

还有 CSS:

 #container { width: 600px; height: 300px; overflow: auto; }

这将为您提供一个漂亮的滚动框,具有指定的尺寸。如果不需要滚动和固定高度,不指定高度,使用overflow: hidden,因为里面的元素是 float 的(这样会让容器占用容器的空间) float div)。

关于css - 带有 CSS 问题的简单图库在 block 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6413099/

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