是否可以使div与Bootstrap中连续图像的高度相同

时间:2015-04-24 20:01:45

标签: html css twitter-bootstrap

我正在使用bootstrap中的“row”类,我有两个图像和一个包含一些文本的div。以下是一个示例:http://notionfresh.com/testsite/

我的目标是使行中的所有元素具有相同的高度。在给定的例子中,我有什么办法可以实现这个目的吗?

.colly {
	margin-bottom: 20px;
}

.colly2 {
	margin-bottom: 20px;
}
	  
.pclass {
	padding: 20px;
}

.textbox {
	height: auto;
    min-width: 270px;
    background: #000;
    font-size: 15px;
    font-style: oblique;
    color: #FFF;
    text-align: center;
	margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Bootstrap -->
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
	<link href="custom.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet" />
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.js"></script>

</head>

<body>

    <div class="row">
		  <div class="colly col-lg-4 col-md-4 col-sm-6">
				<a href="img/portfolio_2.png" ><img src="img/portfolio_2.png" class="img-responsive img-home-portfolio"/></a>
          </div>
          <div class="colly col-lg-4 col-md-4 col-sm-6">
				<a href="img/portfolio_3.png" ><img src="img/portfolio_3.png" class="img-responsive img-home-portfolio"/></a>
          </div>
          <div class="colly2 col-lg-4 col-md-4 col-sm-6">
				<div class="textbox">
				<p class="pclass">Sed cursus libero a risus molestie, vitae lobortis mi aliquam. Curabitur euismod velit risus, et scelerisque elit rhoncus quis. Integer semper lorem quis nisl viverra, nec egestas massa rhoncus. In vitae eros accumsan, commodo tellus at, volutpat neque. Sed rutrum, justo quis congue dictum, odio risus imperdiet nunc, sit amet laoreet nibh ex id tortor. Proin a pretium ipsum. Ut fermentum urna at lobortis interdum.</p>
				</div>
		 </div>
        </div><!-- /.row -->
		
</body>
</html>

0 个答案:

没有答案
相关问题