Pure CSS砌體佈局中盒子底部的奇怪間距？

Question

我有一個Pure CSS Mansonry佈局的問題。對於方框，我使用position: relative，對於每個方框內的內容我使用position: absolute。不過，我注意到當我使用position: absolute時，每個盒子下面都有空隙。我無法弄清楚如何解決它。您還可以看看在這個codepen：http://codepen.io/kikibres/pen/KWjXeG

HTML

@import "compass/css3"; 
 

 
*, *:before, *:after {box-sizing: border-box !important;} 
 

 

 
.servicogallery { 
 
-moz-column-gap: 0; 
 
-webkit-column-gap: 0; 
 
    -moz-column-count: 3;-webkit-column-count: 3;column-count: 3; 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
#services { 
 
display: inline-block; 
 
margin: 0; 
 
padding: 1rem; 
 
width: 100%; 
 
    height: 250px; 
 
    position: relative; 
 
} 
 
#services span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px; 
 
    vertical-align: bottom; 
 
} 
 
.a1 { 
 
    background-color: #0026e7; 
 
    color: #FFF; 
 
} 
 
.a2 { 
 
    background-color:/*#189ed8*/#ffffff; 
 
    color: /*#FFF*/#998b75; 
 
} 
 
.a3 {  
 
    background-color:/*#fff*/#bac0b8; 
 
    color: /*#998b75*/#ffffff; 
 
} 
 
.a4 { background-color: #646664; 
 
    color: #FFF; 
 
} 
 
.a5 {background-color: #0026e7; 
 
    color: #FFF; 
 
} 
 
.a6 {background-color: #29a1e6; 
 
    color: #FFF; 
 
} 
 
.a7 {background-color: #fff; 
 
    color: #998b75; 
 
} 
 
.a8 {background-color: #bac0b8; 
 
    color: #FFF; 
 
} 
 
.a9 { background-color: #fff; 
 
    color: #998b75; 
 
} 
 
.a10 { background-color: #0029e5; 
 
    color: #FFF; 
 
} 
 
.a11 { background-color: #5e605e; 
 
    color: #FFF; 
 
} 
 

 
/* styles for background color, etc; not necessary for this thing to work */ 
 

 

 

 
body { 
 
padding: 1em; 
 
font-family: "Garamond", serif; 
 
} 
 

 

 

 

 
h1 { 
 
    font-size: 3rem; 
 
    font-weight: 800; 
 
} 
 

 
body { 
 
    line-height: 1.25; 
 
} 
 

 

 
p { 
 
text-align: left; 
 
}

<h1>Pure CSS Masonry</h1> 
 
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p> 
 

 
<div class="servicogallery"> 
 

 
    <div id="services" class="a1"> 
 
    <span> 
 
     <p>Formulación y Evaluación de Proyectos de Construcción.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a2"> 
 
    <span> 
 
     <p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a3"> 
 
    <span> 
 
     <p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a4"> 
 
    <span> 
 
     <p>Taludes, Muros.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a5"> 
 
    <span> 
 
     <p>Supervisión de Proyectos</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a6"> 
 
    <span> 
 
     <p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a7"> 
 
    <span> 
 
     <p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a8"> 
 
    <span> 
 
     <p>Tramitología.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a9"> 
 
    <span> 
 
     <p>Obras de Mitigación</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a10"> 
 
    <span> 
 
     <p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p> 
 
     <p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p> 
 
     <p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span> 
 
    </div> 
 
    
 
    <div id="services" class="a11"> 
 
    <span> 
 
     <p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span> 
 
    </div> 
 
    
 
    
 
</div>

我試圖做到的，是周圍的箱子沒有間隙，以及內容是在底部每個盒子。我只能說，position: absolute正在影響差距。

Answer 1

添加vertical-align: top;到#services

@import "compass/css3"; 
 

 
*, *:before, *:after {box-sizing: border-box !important;} 
 

 

 
.servicogallery { 
 
-moz-column-gap: 0; 
 
-webkit-column-gap: 0; 
 
    -moz-column-count: 3;-webkit-column-count: 3;column-count: 3; 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
#services { 
 
margin: 0; 
 
padding: 1rem; 
 
width: 100%; 
 
height: 250px; 
 
position: relative; 
 
vertical-align: top; 
 
display: inline-block; 
 
} 
 
#services span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 20px; 
 
    vertical-align: bottom; 
 
} 
 
.a1 { 
 
    background-color: #0026e7; 
 
    color: #FFF; 
 
} 
 
.a2 { 
 
    background-color:/*#189ed8*/#ffffff; 
 
    color: /*#FFF*/#998b75; 
 
} 
 
.a3 {  
 
    background-color:/*#fff*/#bac0b8; 
 
    color: /*#998b75*/#ffffff; 
 
} 
 
.a4 { background-color: #646664; 
 
    color: #FFF; 
 
} 
 
.a5 {background-color: #0026e7; 
 
    color: #FFF; 
 
} 
 
.a6 {background-color: #29a1e6; 
 
    color: #FFF; 
 
} 
 
.a7 {background-color: #fff; 
 
    color: #998b75; 
 
} 
 
.a8 {background-color: #bac0b8; 
 
    color: #FFF; 
 
} 
 
.a9 { background-color: #fff; 
 
    color: #998b75; 
 
} 
 
.a10 { background-color: #0029e5; 
 
    color: #FFF; 
 
} 
 
.a11 { background-color: #5e605e; 
 
    color: #FFF; 
 
} 
 

 
/* styles for background color, etc; not necessary for this thing to work */ 
 

 

 

 
body { 
 
padding: 1em; 
 
font-family: "Garamond", serif; 
 
} 
 

 

 

 

 
h1 { 
 
    font-size: 3rem; 
 
    font-weight: 800; 
 
} 
 

 
body { 
 
    line-height: 1.25; 
 
} 
 

 

 
p { 
 
text-align: left; 
 
}

<h1>Pure CSS Masonry</h1> 
 
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p> 
 

 
<div class="servicogallery"> 
 

 
    <div id="services" class="a1"> 
 
    <span> 
 
     <p>Formulación y Evaluación de Proyectos de Construcción.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a2"> 
 
    <span> 
 
     <p>Mantenimiento Varios (Edificaciones, Calles, entre otros).</p></span> 
 
    </div> 
 

 
    <div id="services" class="a3"> 
 
    <span> 
 
     <p>Diseño: Arquitectónico, Habitacional, Industrial, Urbano y Comercial.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a4"> 
 
    <span> 
 
     <p>Taludes, Muros.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a5"> 
 
    <span> 
 
     <p>Supervisión de Proyectos</p></span> 
 
    </div> 
 

 
    <div id="services" class="a6"> 
 
    <span> 
 
     <p>Estudios de Factibilidad Técnica – Económica de proyectos de construcción.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a7"> 
 
    <span> 
 
     <p>Diseño Integral de Obras de Ingeniería y Arquitectura.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a8"> 
 
    <span> 
 
     <p>Tramitología.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a9"> 
 
    <span> 
 
     <p>Obras de Mitigación</p></span> 
 
    </div> 
 

 
    <div id="services" class="a10"> 
 
    <span> 
 
     <p><strong>Construcción de Obras Civiles y Remodelaciones:</strong></p> 
 
     <p>Centros comerciales, urbanizaciones, infraestructura: Hidráulica y Víal, complejos industriales, turísticos, deportivo, centros decapacitación, vivienda, centros educativo, hospitales, taludes, muros, obras de mitigación</p> 
 
     <p>Aplicación de pintura con maquinaria industrial avanzada, entre otros.</p></span> 
 
    </div> 
 

 
    <div id="services" class="a11"> 
 
    <span> 
 
     <p>Uso de equipo para la realización de pruebas no destructivas en concreto.</p></span> 
 
    </div> 
 

 

 
</div>