使用padding来合理布局自己的容器类

这两天一直忙着前端UI的事，前端布局这块下了很多工夫，很多第三方布局框架如Bootstrap和layUI等虽然很好使用，但是前端你懂的，实际用起来总得缝缝补补，烦啊。

今天就遇到了一个要让div容器内的元素居中对齐的需求，虽然其他的框架样式也很多，但是不适合我的情况，于是就想办法自己改样式，终于发现了一个方法：就是padding（容器内补）

之前是这样的：

<div class="media" style="border: 1px solid #ddd;">

  <div class="media-left pull-left">

   	<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>

  </div>

  <div class="media-body">

    <div>content</div>

  </div>

  <div class="media-right" >

	<div><i class="fa fa-angle-right fa-lg"></i></div>

  </div>

</div>

　　页面是这样的：

最后想起来：干脆自己做个div容器自己加上对应的内补不就好了吗，这样就能自己调整居中位置了。

<div class="media" style="border: 1px solid #ddd;">

  <div class="media-left pull-left" style="border: 1px solid red;">

   	<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>

  </div>

  <div class="media-body" >

    <div style="padding: 18px 15px">content</div> //加上padding，让自己的元素在自己的容器内看起来居中，自己的div容器则在bootstrap的容器中自适应，不用关心

  </div>

  <div class="media-right" style="padding: 18px 15px">

	<div><i class="fa fa-angle-right fa-lg"></i></div>

  </div>

</div>

　　最后页面居中了

巴特西

使用padding来合理布局自己的容器类

最新文章

热门文章