Html 强制CSS内联块显示到新行_Html_Css

Html 强制CSS内联块显示到新行

html css

Html 强制CSS内联块显示到新行,html,css,Html,Css,我尝试使用CSS内联块作为创建徽标表的替代方法不幸的是，徽标不是向下延伸到下一行，而是放置在彼此下方（例如，参见下面示例中的箭头）我的代码当前如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <style type="text/css"> .gallery{ display:block; }

我尝试使用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>


试验
.画廊{
显示：块；
}
.缩略图{
显示：内联块；
边界：0px；
浮动：左；
最大宽度：250px！重要；
宽度：自动！重要；
高度：自动！重要；
左边距：1厘米；
右边距：1cm；
边缘顶部：1cm；
边缘底部：1cm；
}

浮动规则覆盖内联块规则。不要让它们浮起来

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

删除

浮动：左来自.缩略图
.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;
}

移除浮动：左侧来自.缩略图
.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;
}

是的，如中所述是的，如中所述