您好,我正在尝试实现此外观,但是我对使用CSS定位不太满意。
我也使用bootstrap 3作为框架。我不认为我离得太远了!
我需要的:
我有的:
代码:(使用SASS作为预编译器)
.top-footer {
position: relative;
background-image: url(../img/footerBG.png);
color: $white;
padding: 50px 5em;
.col-head {
font-weight: 600;
text-transform: uppercase;
h3 {
font-size: 1em;
margin-bottom: 5px;
letter-spacing: 2px;
}
}
.col-content {
font-family: $font-family;
float: right;
img {
padding-top: 15px;
}
.latest-news {
h4 {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
font-size: 14px;
margin-bottom: 5px;
}
p {
position: block;
font-weight: 300;
margin-bottom: 5px
}
a {
text-transform: uppercase;
font-weight: 600;
color: $primary;
font-size: 14px;
&:hover {
color: darken($primary, 15%)
}
}
}
}
}
<div class="col-md-4">
<div class="col-head">
<h3>Recent News</h3>
</div>
<div class="col-content">
<img src="<?php echo get_template_directory_uri(); ?>/img/recent-news.png">
<div class="latest-news">
<h4>Latest Updates</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis faucibus nisi... </p>
<a href="#">Read More</a>
</div>
</div>
</div>
任何帮助表示赞赏
最佳答案
您可以使用bootstrap内置类来达到相同的效果
<div class="col-content">
<div class="row">
<div class="col-md-4">
<img src="<?php echo get_template_directory_uri(); ?>/img/recent-news.png">
</div>
<div class="col-md-8">
<div class="latest-news">
<h4>Latest Updates</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis faucibus nisi... </p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
关于html - Bootstrap 3-CSS对齐内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34265333/