对于汽车图像下的标题灰色部分我真的不能有相同的高度。 我希望如果文本很多，就像在第一个框中一样，其他框与第一个框的高度相同。
我尝试过在这个社区找到的所有方法，但没有用。
http://s3.postimg.org/kjp2kesf7/Schermata_2015_08_26_alle_11_43_53.png
有人可以帮助我吗？
/* ==========================================================================
VETRINA AUTO
========================================================================== */
#vetrina-auto .box-vetrina {
overflow: hidden;
position: relative;
background: #ffffff;
}
#vetrina-auto .row-auto {
padding: 50px 0px;
position: relative;
overflow: hidden;
}
/* ===================================
Button
=================================== */
#vetrina-auto .box-vetrina aside img {
padding-top: 38%;
margin-bottom: 0%;
margin: auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
#vetrina-auto .box-vetrina aside a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=10);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* ===================================
Box Auto
=================================== */
#vetrina-auto .box-auto {
text-align: center;
position: relative;
color: #585f63;
margin-bottom: 0%;
}
#vetrina-auto .box-auto img {
border: 1px solid #585f63;
width: 100%;
}
/* ===================================
Testi
=================================== */
#vetrina-auto .box-auto h3 {
font-weight: 600;
font-size: 1em;
letter-spacing: 0.1em;
padding: 5px 5px;
margin: 0px;
background: #585f63;
color: #ffffff;
}
#vetrina-auto .box-auto p {
font-size: 1.1em;
font-weight: 500;
letter-spacing: 0.05em;
margin: 0px;
padding: 5px 0px;
}
#vetrina-auto .box-auto .prezzo {
font-size: 1.4em;
font-weight: 600;
margin: 0px;
padding: 0px;
}
/* ===================================
Icona
=================================== */
#vetrina-auto a .box-auto-hover i {
margin-top: 32%;
}
#vetrina-auto a .box-auto-hover {
color: #fff;
position: absolute;
width: 100%;
height: 100px;
opacity: 0;
background-color: transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0.0;
}
/* ===================================
Hover Button
=================================== */
#vetrina-auto .box-vetrina aside a:hover img {
-webkit-filter: opacity(100%); /* Google Chrome e Apple Safari */
-moz-filter: opacity(100%); /* Mozilla Firefox */
-ms-filter: opacity(100%); /* Microsoft Internet Explorer */
-o-filter: opacity(100%); /* Opera */
filter: opacity(100%); /* La proprietà standard */
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* ===================================
Hover Box Auto
=================================== */
#vetrina-auto a:hover .box-auto {
color: #333a3d;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#vetrina-auto a:hover .box-auto img {
background-color: white;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity:0.4;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* ===================================
Hover Testi
=================================== */
#vetrina-auto a:hover .box-auto h3 {
background: #363f48;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#vetrina-auto a:hover .box-auto .prezzo {
font-weight: 800;
}
#vetrina-auto a:hover .box-auto p {
font-weight: 600;
}
/* ===================================
Hover Icona
=================================== */
#vetrina-auto a:hover .box-auto-hover {
color: #fff;
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
background-zcolor: transparent;
-ms-filter:z"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpzha(opacity=1);
opacity:1.0z;
z
text-shadow: 0 0 20px #000000;
text-shadow: 0 0 10px rgba(0, 0, 0, 1);
text-shadow: 0 0 5px rgba(0, 0, 0, 1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="it"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<!-- Metatag -->
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Ruggero Carrara - RBNZ Visual Art">
<meta name="language" content="it">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#122a44">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<!-- Stili CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home-page.css">
<link rel="stylesheet" href="css/mobile.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- !AUTO IN VETRINA -->
<div class="container">
<div id="vetrina-auto" class="row">
<div class="box-vetrina section-shadow">
<!-- !Usato -->
<div class="row-auto clearfix">
<aside class="tipologia col-xs-12 col-sm-3 col-md-2 col-lg-2">
<a href="#" role="button"><img class="img-responsive" src="img/vetrina-auto/button-usato.jpg" alt="Immagine Bottone Usato" title="Scopri tutto il nostro Usato!" /></a>
</aside>
<!-- Auto 1 -->
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<a href="#">
<div class="box-auto">
<img src="img/icons/new.png" alt="Nuova Aggiunta" style="position: absolute;width: 40%;left: 0;top: 0;border: 0px;"><!-- NEW -->
<div class="box-auto-hover"><i class="fa fa-3x fa-search-plus"></i></div><!-- /icona hover -->
<img class="img-responsive section-shadow" src="img/vetrina-auto/segnaposto/segnaposto-1.jpg" alt="" title="" />
<h3>VOLKSWAGEN Golf Business 1.6 TDI Blue DSG 5p. Comfortline</h3>
<p>Benzina 3.8 CV</p>
<p class="prezzo">30.900€</p>
</div><!-- /box-auto -->
</a>
</div>
<!-- /Auto 1 -->
<!-- Auto 2 -->
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<a href="#">
<div class="box-auto">
<div class="box-auto-hover"><i class="fa fa-3x fa-search-plus"></i></div><!-- /icona hover -->
<img class="img-responsive section-shadow" src="img/vetrina-auto/segnaposto/segnaposto-2.jpg" alt="" title="" />
<h3>AUDI A4 Avant</h3>
<p>Benzina 3.8 CV</p>
<p class="prezzo">30.900€</p>
</div><!-- /box-auto -->
</a>
</div>
<!-- /Auto 2 -->
<!-- Auto 3 -->
<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
<a href="#">
<div class="box-auto">
<div class="box-auto-hover"><i class="fa fa-3x fa-search-plus"></i></div><!-- /icona hover -->
<img class="img-responsive section-shadow" src="img/vetrina-auto/segnaposto/segnaposto-3.jpg" alt="" title="" />
<h3>AUDI A4 Avant</h3>
<p>Benzina 3.8 CV</p>
<p class="prezzo">30.900€</p>
</div><!-- /box-auto -->
</a>
</div>
<!-- /Auto 3 -->
<!-- Auto 4 -->
<div class="hidden-xs hidden-sm col-md-2 col-lg-2">
<a href="#">
<div class="box-auto">
<img src="img/icons/new.png" alt="Nuova Aggiunta" style="position: absolute;width: 40%;left: 0;top: 0;border: 0px;"><!-- NEW -->
<div class="box-auto-hover"><i class="fa fa-3x fa-search-plus"></i></div><!-- /icona hover -->
<img class="img-responsive section-shadow" src="img/vetrina-auto/segnaposto/segnaposto-4.jpg" alt="" title="" />
<h3>AUDI A4 Avant</h3>
<p>Benzina 3.8 CV</p>
<p class="prezzo">30.900€</p>
</div><!-- /box-auto -->
</a>
</div>
<!-- /Auto 4 -->
<!-- Auto 5 -->
<div class="hidden-xs hidden-sm col-md-2 col-lg-2">
<a href="#">
<div class="box-auto">
<img src="img/icons/new.png" alt="Nuova Aggiunta" style="position: absolute;width: 40%;left: 0;top: 0;border: 0px;"><!-- NEW -->
<div class="box-auto-hover"><i class="fa fa-3x fa-search-plus"></i></div><!-- /icona hover -->
<img class="img-responsive section-shadow" src="img/vetrina-auto/segnaposto/segnaposto-5.jpg" alt="" title="" />
<h3>AUDI A4 Avant</h3>
<p>Benzina 3.8 CV</p>
<p class="prezzo">30.900€</p>
</div><!-- /box-auto -->
</a>
</div>
<!-- /Auto 5 -->
</div>
<!-- Usato -->
</div><!-- row-vetrina -->
</div><!-- row -->
</div><!-- container -->
<!-- /AUTO IN VETRINA -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
答案 0 :(得分：0)
在每个方框中使用属性min-height，这样你就可以将所有方框放在相同的最小高度。