gpt4 book ai didi

html - 使用 CSS 定位图像(对抗默认框/空白)

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

我在一页上有 9 张图片,前 6 张没问题,但后 3 张太低了,需要抬起来与中间的图片齐平(图片 4-6),请参阅图片了解详情.

http://s29.postimg.org/5jejyjgrr/tiles.jpg

CSS:

body {
margin: 0px;
text-align: center;
}

header img {
display: inline;
margin-right: -5px;
}

nav img {
display: block;
}

div img {
display: block;
float: right;
clear: right;
}

HTML:

<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<title>Space Shots</title>
</head>

<body>
<header>
<img src="/images/spaceshots/purple-space.jpg" alt="purple space" height="250" width="250">
<img src="/images/spaceshots/red-space2.jpg" alt="red space 2" height="250" width="250">
<img src="/images/spaceshots/blue-space3.jpg" alt="blue space3" height="250" width="250">
<br><br><br><br>
</header>
<nav>
<img src="/images/spaceshots/purple-space3.jpg" alt="purple space 3" height="250" width="250">
<img src="/images/spaceshots/red-space.jpg" alt="red space" height="250" width="250">
<img src="/images/spaceshots/blue-space.jpg" alt="blue space" height="250" width="250">
</nav>
<div>
<img src="/images/spaceshots/blue-space2.jpg" alt="blue space 2" height="250" width="250">
<img src="/images/spaceshots/red-space3.jpg" alt="red space 3" height="250" width="250">
<img src="/images/spaceshots/purple-space2.jpg" alt="purple space 2" height="250" width="250">
</div>
</body>

<html>

最佳答案

对你的CSS做一点改动添加一个 float :左;导航

nav img {
display: block;
float:left
}

也为div创建一个css

div{
float:right;
}

刷新您的页面!完成!

关于html - 使用 CSS 定位图像(对抗默认框/空白),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26702384/

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