zoukankan      html  css  js  c++  java
  • 使用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;  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;  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>
    

      最后页面居中了

      

  • 相关阅读:
    [原创]二路归并排序针对数组的场景(C++版)
    [原创]装饰模式(java版)
    [原创]Java中Map根据值(value)进行排序实现
    [原创]适配器模式(java版)
    信了你的邪
    String和Date转换
    电商运营面试题
    springCloud发送请求多对象参数传递问题
    JS实现页面以年月日时分秒展示时间
    java三种注释以及参数涵义(转)
  • 原文地址:https://www.cnblogs.com/nelson-hu/p/7550457.html
Copyright © 2011-2022 走看看