CSS实现两列同等高度
来源：互联网 发布：mac怎么打开png格式 编辑：程序博客网 时间：2024/06/03 17:16
要实现两列内容不同的元素显示同等高度，除了通过使用table表格以及设置固定高度外，还可通过使用display：table-cell实现。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>实现布局两列等高</title><style type="text/css">#box{width: 800px;margin: 0 auto;}.col{/*以下一句是核心代码*/display:table-cell;/*实现两列等高*/width: 400px;}.col:first-child{background: #C9E2B3;/*更改颜色方便查看*/}.col:last-child{background: #A6E1EC;/*更改颜色方便查看*/}</style></head><body><div id="box"><div class="col"><p>123</p><p>345</p><p>456</p><p>456</p></div><div class="col">9090</div></div></body></html>效果图：
以上！
阅读全文
1 0
- CSS实现两列同等高度
- DIV+CSS左右两列自适应高度
- CSS实现已知宽高的div垂直居中；自适应高度两列布局
- CSS实现两列布局
- CSS实现两列布局
- javascript 实现 两列高度自适应
- 经典DIV+CSS案例--两列高度自适应
- DIV+CSS左右两列自适应高度的方法
- 使用CSS实现两列布局
- CSS两列自适应高度DIV（高度自动增加）兼容ie和firefox
- CSS实现网页布局(一列，两列，三列)
- css实现多列高度自适应的方法
- CSS两列布局
- CSS 两列布局
- CSS两列布局
- css 两列布局
- css两列布局
- 典型的三行两列居中高度自适应div+css布局
- Inno setup 界面设计入门（二）语法入门
- PHP yield生成器
- JavaSE_io_根据路径逐层创建文件夹 （代码实现）
- RecyclerView实现条目展示 增加删除 3种管理器
- Git显示单个文件的修改记录
- CSS实现两列同等高度
- 个性化推荐系统简介
- 【学习总结】JVM垃圾回收机制
- Centos下安装nginx
- DrawerLayout侧拉
- C
- 大数据驱动业务增长：百度外卖商业智能推荐系统实践
- ionic2--扫描二维码
- 数据科学家必须知道的10个深度学习架构
