Как правильно сверстать такой элемент?
Как правильно сверстать такой элемент?
Источник: Stack Overflow на русском
Как правильно сверстать такой элемент?
Вот набросал http://jsfiddle.net/e445kxzm/
html
<div class="conteiner">
<div class="item">
<div class="item-head"></div>
<div class="item-body"></div>
<div class="item-foot"></div>
</div><!--
--><div class="item item-best">
<div class="item-head"></div>
<div class="item-body"></div>
<div class="item-foot"></div>
</div><!--
--><div class="item">
<div class="item-head"></div>
<div class="item-body"></div>
<div class="item-foot"></div>
</div>
</div>
css
.item{
margin: 25px auto;
min-height: 150px;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
width: 33.33%;
background: #37AB87;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 6px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0 6px 10px rgba(0,0,0,0.4);
box-shadow: 0 6px 10px rgba(0,0,0,0.4);
}
.item-best{
min-height: 200px;
position: relative;
}