gpt4 book ai didi

html - 无法定位多个图像 - CSS

转载 作者:太空宇宙 更新时间:2023-11-03 22:36:23 25 4
gpt4 key购买 nike

我试图让三张图片居中并位于页面底部。我坚持使用左侧而不是中心的图像。我尝试了许多不同的方法来让它工作,但没有一个奏效。如果有人可以帮助我,将不胜感激

.banner {
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}

body {
padding: 0;
margin: 0;
}

#imagesMain {
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
}

img {
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">

<head>
<title>A-level Revision Website</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>

</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>

</html>

最佳答案

只需在 #imagesMain 上添加 width:100%。您的图像居中,但 #imagesMain 本身宽度不足以显示它。 width:100% 使其与视口(viewport)一样宽。

.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
padding: 0;
margin: 0;
}
#imagesMain{
position: fixed;
bottom: 0;
padding: 0;
margin: 20px 10px;
text-align: center;
width:100%
}

img{
margin-right: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>A-level Revision Website</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>A-Level Revision Website</h1>
</div>

</div>
<div id="imagesMain">
<a href="Maths.html">
<img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
</a>
<a href="ComputerScience.html">
<img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
</a>
<a href="Physics.html">
<img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
</a>
</div>
</html>

关于html - 无法定位多个图像 - CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46350505/

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