h5学习笔记:左右布局
来源:互联网 发布:程序员必读书籍 活着 编辑:程序博客网 时间:2024/04/30 01:53
最近在学习css的时候会经常用到左右布局。所以会先建立一个div容器,里面添加图形和文本
效果图如下。
于是第一步会先建立一个div,然后在内部添加两个div。
<div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span>1000</span> </div></div>
这里说明一下,最外层样式为item-box ,内部两个div,分别为 item-box-icon 和 item-box-text,从字母上也很容易理解,图标和文本。
接下来,我们为每一个div添加样式,为了更加直观一点,我们添加一个边框观察div的情况
<style type="text/css"> .item-box { width: 250px; height: 90px; background-color: white; border: 1px solid red; } .item-box-icon{ display: inline-block; width: 90px; height: 90px; background-color:#1aa094 ; border: 1px solid red; } .item-box-text{ border: 1px solid red; } </style>
运行第一次效果查看情况。可以看到文本和我们示意图事宜愿为。发现不行。
接下来,我们将.item-box-text 样式 改成 内联块 。默认情况下 div的显示方式为block,会占据整一行位置。因此可以看到因为这里我们的文本区域并没有往右边靠。
.item-box-text{ border: 1px solid red; display: inline-block; }
我们设置了inline-block后查看一下效果。虽然我们已经将div变成了内联块,但离我示意图还是有区别。
为了解决这个问题。我们引入position,将其变成绝对定位。
.item-box-text{ border: 1px solid red; display: inline-block; position: absolute; }
再次运行一下,观察效果 。这个时候,文本会依据我们意愿出现了相应的情况。
除此方法,还可以配合 vertical-align:top的方式处理文本让其变成右边布局。
.item-box-text{ border: 1px solid red; display: inline-block; vertical-align: top; }
目前为此这个问题就通过此方法来解决这个问题。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Css 练习</title> </head> <style type="text/css"> .item-box { width: 250px; height: 90px; background-color: white; box-shadow: 0 1px 1px rgba(0,0,0,0.1); border-radius: 2px; margin-bottom: 20px; display: inline-block; } .item-box-icon{ display: inline-block; width: 90px; height: 90px; background-color:#1aa094 ; } .item-box-text{ display: inline-block; position: absolute; padding:5px 10px; } .item-box-number{ display: block; font-size: 30px; font-weight: 600; } .container{ width: 50%; } </style> <body> <div class="container"> <div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span class="item-box-number">1000</span> </div> </div> <div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span class="item-box-number">1000</span> </div> </div> <div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span class="item-box-number">1000</span> </div> </div> <div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span class="item-box-number">1000</span> </div> </div> </div> </body></html>
最后我们编辑一个效果
方法二:使用flex高效布局
事实上,仅仅使用flex的方式就可以将两个div实现区域内左右布局。
这里写代码片.item-box 样式下显示方式修改一下display: flex;
查看浏览器的兼容性:http://caniuse.com/#search=flex
display: -webkit-flex; //webkit浏览器加上。
这种方式布局下,div的大小会呈现大小一致。<style type="text/css"> .item-box { width: 250px; height: 90px; background-color: white; border: 1px solid red; display: flex; } .item-box-icon{ width: 90px; height: 90px; background-color:#1aa094 ; border: 1px solid red; } .item-box-text{ border: 1px solid red; } </style>
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Css 练习</title> </head> <style type="text/css"> .item-box { width: 250px; height: 90px; background-color: white; border: 1px solid red; display: flex; } .item-box-icon{ width: 90px; height: 90px; background-color:#1aa094 ; border: 1px solid red; } .item-box-text{ border: 1px solid red; } </style> <body> <div class="container"> <div class="item-box"> <div class="item-box-icon"> </div> <div class="item-box-text"> <span>人均在线</span> <span class="item-box-number">1000</span> </div> </div> </div> </body></html>
0 0
- h5学习笔记:左右布局
- h5学习笔记: css布局案例练习
- h5学习笔记:Table
- H5学习笔记
- H5学习笔记
- h5学习笔记:Table2
- h5学习笔记:weui
- h5 canvas学习笔记
- H5学习笔记
- h5,css学习笔记
- H5 学习笔记1
- H5 学习笔记2
- H5 学习笔记3
- H5 学习笔记4
- H5 学习笔记5
- h5学习笔记:flex
- H5学习之旅-H5的布局(10)
- H5学习之10 div布局
- 43. Spring Boot动态数据源(多数据源自动切换)【从零开始学Spring Boot】
- 好心态
- Jenkins使用 管理节点
- RecyclerView的NestedScrollingParent
- CollectionView瀑布流添加头视图,自定义Cell计算高度
- h5学习笔记:左右布局
- mysql insert 测试
- servlet/filter/listener/interceptor区别与联系
- 接口测试知识点概要
- 安装在Linux下的jenkins执行windows下的bat命令
- 学习前端以来搜集到的网站
- mysql 默认设置
- redis-cluster官方集群模式下使用pipeline批量操作
- Vim 实现多行注释和取消多行注释