Question

我正在尝试使用CSS内联块作为创建徽标表的替代方法。

不幸的是，这些标识没有流到下一行，而是放在彼此之下（例如，见下面的例子中的箭头）

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

<!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>

Answer 1

从.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;
}

Answer 2

float:left;

浮动规则会覆盖内联块规则。不要漂浮它们。

强制CSS内联块显示到新行

2 个答案: