gpt4 book ai didi

html - 强制 CSS 内联 block 显示到新行

转载 作者:太空宇宙 更新时间:2023-11-03 20:07:31 26 4
gpt4 key购买 nike

我正在尝试使用 CSS 内联 block 作为创建 Logo 表格的替代方法。

不幸的是, Logo 并没有向下延伸到下一行,而是被放置在彼此的下方(例如,参见下面示例中的箭头)

enter image description here

我的代码目前看起来像这样:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style type="text/css">
.gallery{
display:block;
}
.thumbnail{
display:inline-block;
border:0px;
float:left;
max-width:250px !important;
width: auto !important;
height: auto !important;
margin-left: 1cm;
margin-right: 1cm;
margin-top: 1cm;
margin-bottom: 1cm;
}
</style>
</head>

<body>

<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />
<img class="gallery thumbnail" src=“X” alt=“Z” />

</body>

</html>

最佳答案

从 .thumbnail 中删除 float: left;

.gallery{
display:block;
}
.thumbnail{
display:inline-block;
border:0px;
max-width:250px !important;
width: auto !important;
height: auto !important;
margin-left: 1cm;
margin-right: 1cm;
margin-top: 1cm;
margin-bottom: 1cm;
}

关于html - 强制 CSS 内联 block 显示到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43629472/

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