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>
    

      最后页面居中了

      

  • 相关阅读:
    使用Layui上传图片,并进行压缩(非原创,证实可用)
    mysql 存储过程及事件
    Redis一些简单的笔记
    RIOT 技术笔记-01 RIOT介绍
    杂七杂八-ubuntu安装eclipse
    杂七杂八-sqlyog连接mysql错误码2058
    杂七杂八-Mysql8.0忘记root密码
    RIOT学习笔记-01 cygwin安装
    Ubutun-安装远程桌面
    中间件-RocketMQ 02 Docker下的安装
  • 原文地址:https://www.cnblogs.com/nelson-hu/p/7550457.html
Copyright © 2011-2022 走看看