请参阅JSfiddle:http://jsfiddle.net/MU2y2/ 底部的div没有正确对齐,但我无法找到原因。 我认为这必须与显示内联块有关。但是,没有上边距
<div class="kaders">
<div class="rij">
<div class="kader" href="http://www.checkjekamer.nl/check/huurZelfstandig">
<h1>Zelfstandig</h1>
<p>Check hier je kamer als je in <b>zelfstandige</b> woonruimte woont</p>
</div>
<div class="kader" href="http://www.checkjekamer.nl/check/huurOnzelfstandig">
<h1>Onzelfstandig</h1>
<p>Check hier je kamer als je in <b>onzelfstandige</b> woonruimte woont</p>
</div>
</div>
<div class="rij">
<div class="kader" href="http://www.checkjekamer.nl/check/huurToeslag">
<h1>Huurtoeslag</h1>
<p>Check hier de hoogte van je <b>huurtoeslag</b></p>
</div>
<div class="kader" href="http://www.checkjekamer.nl/check/brandveiligheid">
<h1>Brandveiligheid</h1>
<p>Check hier de <b>brandveiligheid</b> van je kamer</p>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family:Open Sans;
}
/* background-color: #f7f7f7;
color:#d10000;
*/
.kaders{
text-align:center;
}
.kader{
cursor:pointer;
display:inline-block;
width:200px;
height:200px;
background-color: #f7f7f7;
margin:10px;
margin-top:0;
}
.rij{
display:block;
border:1px solid pink;
}
.kader h1{
font-size:1.1em;
}
答案 0 :(得分:3)
只需将vertical-align: text-top;
添加到.kader
详细了解vertical-align
here
.kader{
cursor:pointer;
display:inline-block;
width:200px;
height:200px;
background-color: #f7f7f7;
margin:10px;
margin-top:0;
vertical-align: text-top;
}
答案 1 :(得分:2)
将vertical-align: top;
添加到.kader
。
<强> CSS:强>
.kader{
cursor:pointer;
display:inline-block;
width:200px;
height:200px;
background-color: #f7f7f7;
margin:10px;
margin-top:0;
vertical-align: top;
}