强制CSS内联块显示为新行

我试图使用CSS内联块作为创建徽标表的替代方法。强制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>

来源

2017-04-26 Little Code

从.thumbnail

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

来源

2017-04-26 08:59:41 athi

float:left;

浮动るles覆盖内嵌块规则。不要浮动它们。

来源

2017-04-26 08:59:38 Quentin

是的，如[ '显示器'， '位置' 和 '浮动' 的关系]说明（https://www.w3.org/TR/CSS22删除float: left; /visuren.html#dis-pos-flo） – FelipeAls

强制CSS内联块显示为新行

回答

相关问题