div构建table

1、Css display值与解释-(详细可见CSS手册CSS display手册)参数: block :块对象的默认值。用该值为对象之后添加新行 none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间 inline :内联对象的默认值。用该值将从对象中删除行 compact :分配对象为块对象或基于内容之上的内联对象 marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell :将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示 table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示

2、代码段如下

#main { display : table ; border-collapse : collapse ; } #nav { display : table-cell ; width : 180px ; background-color : #e7dbcd ; } #extras { display : table-cell ; width : 180px ; padding-left : 10px ; border-right : 1px dotted #d7ad7b ; } #content { display : table-cell ; width : 380px ; padding-left : 10px ; }

<div id="wrapper"> <div id="main"> <div id="nav"> navigation column content… </div> <div id="extras"> news headlines column content… </div> <div id="content">main article content… </div> </div> </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • div构建table

    1、Css display值与解释-(详细可见CSS手册的CSS display手册)参数: block :块对象的默认值。用该值为对象之后添加新行 none ...

    一笠风雨任生平
  • spring同时集成mybatis和ibatis

    最近来了一个新项目,说是新的项目,但是需要用到以前旧的模块代码,旧的模块使用架构为ssi

    一笠风雨任生平
  • mongodb 中嵌套数组的且查询

    experts:[{expertId:"1",result:"success",......}

    一笠风雨任生平
  • div构建table

    1、Css display值与解释-(详细可见CSS手册的CSS display手册)参数: block :块对象的默认值。用该值为对象之后添加新行 none ...

    一笠风雨任生平
  • 一道二栏布局题目

    <div id="wrapper">     <div>C</div>     <div>A</div>     <div>B</d...

    meteoric
  • ADO.Net学习总结

    Connection对象 Command对象 DataReader对象 DataAdapter对象 DataSet对象 DataTable对象 DataRow对...

    wfaceboss
  • 前端学习笔记之CSS网页布局 CSS网页布局

      1、浮动流只有一种排版方式,就是水平排版,它只能设置某个元素左对齐或者右对齐,没有居中对齐,也就是没有center这个取值

    Jetpropelledsnake21
  • 设计模式之对象池模式

    对象池模式, 或者称为对象池服务, 其意图为: 通过循环使用对象, 减少资源在初始化和释放时的昂贵损耗(这里的"昂贵"可能是时间效益(如性能), 也可能是空间效...

    烟草的香味
  • 测试开发进阶(十二)

    ![鼠标放上去之后](../../../Library/Application Support/typora-user-images/image-2019083...

    zx钟
  • 传统企业站开发 - 页面布局

    前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发...

    HTML5学堂

扫码关注云+社区

领取腾讯云代金券