我有一个父 div 和 4 个内部子 div 彼此相邻,每个子 div 我有 3 个 div;一个包含标题,另一个包含图像,最后一个包含图标。我注意到它们从底部对齐,如果图像的高度不同,则标题与其他标题的高度不同。无论图像大小如何,我都希望标题始终位于顶部且高度相同
.cajapadre {
text-align: center;/* Una caja al lado de la otra importante padre*/
margin-bottom: 0px;
}
.caja4hijo {
background-color: #F8F8F8;
padding: 0px;
margin: 0px;
width: 225px;
display: inline-block;/* una caja al lado d ela otra importante hoja */
}
.espacio-art {
padding-bottom: 15px;
}
.titulo-art {
font-family: 'Sansita', sans-serif;
font-size: 1.2em;
color: #C42427;
background: #9AB01E;
}
<article>
<!--primera tanda-->
<div class="cajapadre">
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="http://arbolesdenavidad.net/wp-content/uploads/2013/10/arbol-bajito-120-510.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Select</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="http://1.bp.blogspot.com/-njHeRmV9ZN4/TfLBdtZxPnI/AAAAAAAANEc/iqHI9Q_nN0c/s1600/copiadepencil4wi9.gif" title="3M™ Littmann® Select"><img src="img/thumbs/sel.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico Edición Especial</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
</div>
</article>
<!--fin primera tanda-->
问题仍然存在于每个产品框的父元素的 display:inline-block 属性中,即类 '.caja4hijo' 的元素
如果将其替换为 display: block 并执行 float:left ,则可以对齐标题元素。
所以是的,这取决于您的模板布局和其他元素的布局,因为 float:left 会导致这些元素的父级丢失高度参考。您将不得不使用具有 clear:both 属性的元素;例如。
我建议您使用诸如引导程序或材料之类的 CSS 框架。除了帮助您处理网格的整个主题(模板的元素“框”的分布)之外,它们还将为您提供更多有用的元素和效果,使您的工作快速而轻松。
以下是链接: http : //getbootstrap.com/、http: //materializecss.com/、http : //foundation.zurb.com/
你必须给图片设置一个高度来做你想做的事情,因为图片有不同的尺寸,如果和按钮图片一样,最好设置一个高度来防止标题错位的情况发生,即为什么我要为班级制定规则
.imagen-art
<img />
或者你可以像这样把它放在标签上