我在调整图标和文字时遇到问题,使它们保持相同的高度
我强调了一些让他们很容易看到的元素:
我想让图标和标题对齐,如红线所示:
源:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box"><img>
<div class="content"><h3 >title</h3>
<p class="text-muted">content goes here lorem ipsum bla bla </p></div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box"><img src="/static/media/icon.svg">
<div class="content" ><h3>title 2</h3>
<p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p></div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box"><img src="/static/media/icon.svg">
<div class="content"><h3>title 3</h3>
<p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed dolorem ipsum dolor
sit amet consectetur adipiscing elit sed do</p></div>
</div>
</div>
</div>
</div>
答案 0 :(得分:2)
有很多方法可以做到这一点。一种是向左浮动图像,并在服务框元素之后添加clear: both;
。 (我在图像标签上添加了一些额外的样式,因此它将在演示中显示。背景颜色,最小宽度,最小高度当然不是必需的。)
.service-box img {
float: left;
margin-right: 20px;
min-height: 80px;
min-width: 80px;
background: lightblue;
}
.service-box:after{
content:'';
display:block;
clear:both;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box">
<img>
<div class="content">
<h3 >title</h3>
<p class="text-muted">content goes here lorem ipsum bla bla </p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box">
<img src="/static/media/icon.svg">
<div class="content">
<h3>title 2</h3>
<p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<div class="service-box">
<img src="/static/media/icon.svg">
<div class="content">
<h3>title 3</h3>
<p class="text-muted">lorem ipsum dolor sit amet consectetur adipiscing elit sed dolorem ipsum dolor sit amet consectetur adipiscing elit sed do</p>
</div>
</div>
</div>
</div>
</div>
&#13;