您好,我正在尝试实现此外观,但是我对使用CSS定位不太满意。

我也使用bootstrap 3作为框架。我不认为我离得太远了!

我需要的:

html - Bootstrap 3-CSS对齐内容-LMLPHP

我有的:

html - Bootstrap 3-CSS对齐内容-LMLPHP

代码:(使用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/

10-12 12:50
查看更多