gpt4 book ai didi

html - 如何并排对齐图像而不是彼此重叠?

转载 作者:行者123 更新时间:2023-11-28 16:54:26 25 4
gpt4 key购买 nike

我希望图像并排显示,而不是彼此重叠。

我尝试添加 float:left 但这没有帮助。

<div class="body">
<div style="
display:inline-block;
width: 33.33%;
height:110px; background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" </div>
<div style="
display:inline-block;
width: 33.33%;
height:110px; background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" </div>
<div style="
display:inline-block;
width: 33.33%;
height:110px; vertical-align:top; background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" </div>

最佳答案

正如@LeeTaylor 所提到的,您的 div 没有被关闭并且丢失了 >

其次,现在不推荐使用内联样式来进行标记,而是使用级联样式表 (CSS) 并使用元素类和/或 ID 来应用设置样式。

使用 Flexbox 进行修复的示例.

.flex{
display:flex;
justify-content:center;
}
.img-div{
width: 33.33%;
height:110px;
background: url(https://wallpaperfm.com/img/original/6/1/3/13347.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- You add the Stylesheet to the html file in the head like this -->
<link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="flex">
<div class="img-div"> </div>
<div class="img-div"> </div>
<div class="img-div"> </div>
</div>
</body>
</html>

More information on CSS and its usage

关于html - 如何并排对齐图像而不是彼此重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57647648/

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