gpt4 book ai didi

html - 使这些图像分隔线水平

转载 作者:太空宇宙 更新时间:2023-11-04 10:42:26 24 4
gpt4 key购买 nike

我正在尝试用可点击的图像作为按钮制作一个简单的主页,没问题,我可以做到。但我被困在这部分:我将这 4 张图像放在带有悬停阴影的分隔线中。现在这些图像彼此垂直。我希望它们水平并排放置。

编辑:知道了,现在我需要它使其水平和垂直居中。

代码:

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgBox
{
width: 300px;
height: 600px;
display: inline-block
}

.imgBox:hover
{
display: inline-block
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
</style>
</head>
<body background="back.jpg">
<center>
<div align="left">
<div class="imgBox">
<a target="_blank" href="IntensityBanner.png">
<img src="IntensityBanner.png" alt="Trolltunga Norway" width="300" height="600">
</a>
</div>

<div class="imgBox">
<a target="_blank" href="EarningsBanner.png">
<img src="EarningsBanner.png" alt="Forest" width="300" height="600">
</a>
</div>

<div class="imgBox">
<a target="_blank" href="img_lights.jpg">
<img src="DesignBanner.png" alt="Northern Lights" width="300" height="600">
</a>
</div>

<div class="imgBox">
<a target="_blank" href="img_mountains.jpg">
<img src="SpaarGamesBanner.png" alt="Mountains" width="300" height="600">
</a>
</div>
</center>
</div>
</body>
</html>

现场演示:http://twanofzo.nl/test/

最佳答案

首先,确保关闭第一个 imgBox div(第 12 行),否则会给您带来麻烦。

接下来,要使它们水平显示,您应该能够将 display: inline-blockfloat: left 添加到您的 的 css 中。 imgBox

关于html - 使这些图像分隔线水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35687532/

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