Question

我有相同宽度但高度可变的div，但是下面代码中的div在它们之间有垂直的空白区域（特别是div49），我怎样才能让div在页面顶部对齐并填充在垂直方向和水平方向下方（基本上在div之间移除尽可能多的空白区域）？

寻找纯CSS解决方案（如果存在）？

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
/*    float: left;*/
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
        display: inline-block;
/*    float: left;*/
}

<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div>
<div class="boxx"  data-sort='49'>div49</div>
<div class="boxx2"  data-sort='1.1'>div1.1</div>
<div  class="boxx" data-sort='2'>div2</div>
<div class="boxx"  data-sort='1'>div1</div>
<div class="boxx"  data-sort='3'>div3</div>
<div class="boxx"  data-sort='99'>div99</div>
<div class="boxx"  data-sort='88'>div88</div>
<div class="boxx"  data-sort='77'>div77</div>

使用之前/之后的图片更容易解释：

Answer 1

删除HTML代码中的换行符：

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
/*    float: left;*/
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
        display: inline-block;
/*    float: left;*/
}

<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div><div class="boxx"  data-sort='49'>div49</div><div class="boxx2"  data-sort='1.1'>div1.1</div><div  class="boxx" data-sort='2'>div2</div><div class="boxx"  data-sort='1'>div1</div><div class="boxx"  data-sort='3'>div3</div><div class="boxx"  data-sort='99'>div99</div><div class="boxx"  data-sort='88'>div88</div><div class="boxx"  data-sort='77'>div77</div>
</div>

阅读this article以获取解释和其他解决方案。

Answer 2

有解决方案。

使用flexbox。

＆＃13;

NULL

＆＃13;

.grid { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap;
  height: 100vw;
  max-height: 800px;
}
img {  
  width: 33.3%;
  margin: 5px;
}

＆＃13;

使用CSS多列布局

＆＃13;

<div class="grid">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x250">
    <img src="http://placehold.it/350x350">
    <img src="http://placehold.it/350x450">

</div>

＆＃13;

.grid {
    column-count: 4;
    column-gap: 1em;
}

img {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

＆＃13;

您还可以检查浏览器兼容性for flexbox和for column layout

Answer 3

试试这个......可能会有效

将static bool structValidate( XmlNodeList xmlOldNode, XmlNodeList xmlNewNode) { if (xmlOldNode.Count != xmlNewNode.Count) return true; for (var i = 0; i < xmlOldNode.Count; i++) { var nodeA = xmlOldNode[i]; var nodeB = xmlNewNode[i]; Console.WriteLine("\n" + nodeA.Name + ":"); Console.WriteLine("\n" + nodeB.Name + ":"); Console.ReadLine(); if (nodeA.Attributes == null ) { if (nodeB.Attributes != null) return true; else continue; } if (nodeA.Attributes.Count != nodeB.Attributes.Count || nodeA.Name != nodeB.Name) return true; for (var j = 0; j < nodeA.Attributes.Count; j++) { var attrA = nodeA.Attributes[j]; var attrB = nodeB.Attributes[j]; Console.WriteLine(attrA.Name); Console.WriteLine(attrB.Name); Console.ReadLine(); if (attrA.Name != attrB.Name) return true; } if (nodeA.HasChildNodes && nodeB.HasChildNodes) { return structValidate(nodeA.ChildNodes, nodeB.ChildNodes); } else { return false; } } return false; }提供给父元素，因为如果您默认使用font-size: 0;，它将创建一个文本节点，因此它将显示一个空格。要删除它，我们需要将display: inline-block;用于父元素。

Answer 4

只需在boxx和boxx2类中添加负边距。

.boxx, boxx2{
margin: -2px
}

Answer 5

你尝试过花车吗？试试这个，这可能会对你有所帮助

.boxx {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 60px;  
    position: relative;
    overflow: hidden;
    display: inline-block;
    float: left;
}
.boxx2 {
    border-radius: 5px;
    border: 5px solid #AACAF7;
    padding: 10px; 
    background-color: #eee;
    width: 200px;
    height: 120px;  
    position: relative;
    overflow: hidden;
     
  float: left;
}

<div id="sortableDiv">
<div class="boxx2" data-sort='5.1'>div5.1</div>
<div class="boxx"  data-sort='49'>div49</div>
  <div style="clear:both;"></div>
<div class="boxx2"  data-sort='1.1'>div1.1</div>
<div  class="boxx" data-sort='2'>div2</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='1'>div1</div>
<div class="boxx"  data-sort='3'>div3</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='99'>div99</div>
<div class="boxx"  data-sort='88'>div88</div>
    <div style="clear:both;"></div>
<div class="boxx"  data-sort='77'>div77</div>

纯css砌体视图：删除可变高度div之间的所有（垂直）空白区域

5 个答案: