gpt4 book ai didi

html - 页面上的图像未对齐

转载 作者:行者123 更新时间:2023-11-28 04:52:53 24 4
gpt4 key购买 nike

我不知道我做错了什么,但我的图像没有在屏幕上并排显示?顺便说一句,我对 CSS 很陌生。理想情况下,我希望图像像这样显示 - bensilvertown.com

提前致谢!

HTML:

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<div class="work images">
<div>
<a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/cursor.png" />
<p>This is image 1</p>
</div>
<div>
<a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/MIKE\ BRODIE.jpg" />
<p>This is image 2</p>
</div>

</div>

</body>
</html>

CSS:

    html{
background-color: #000000
}

html,body{
color: #fff;
font-family:
font-weight:
}

/*align images side by side!*/
div{
float:left;
margin-right:5px;
}

div > img{
height:200px;
width:200px;
}

p{
text-align:center;
}

最佳答案

插入 display:inline; div 内的属性(property)

Obs1:我已经更改了您的图像路径以更好地验证您的代码。
Obs2:你忘了关闭你的标签<a>在 img 之前
Obs3:只有分辨率足够,它们才会并排。

https://jsfiddle.net/2ke6huxs/

关于html - 页面上的图像未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40598719/

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