div制作表格

来源：互联网发布：淘宝买家v4是什么级别编辑：程序博客网时间：2024/05/10 14:24

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>用DIV制作表格</title>    <style>        #table{            border: 1px solid black;            float: left;            padding: 3px;            font-size: 16px;        }        .head{            width: 100%-3px;            border:1px solid red;        }        .image{            padding: 23px 0;            border:1px solid blue;            float: left;            margin-top: 3px;            margin-right: 3px;        }        .item{            border: 1px solid green;            margin-top:3px;        }    </style></head><body><div id="table">    <div class="head">Heading</div>    <div>        <div class="image">Image</div>        <div style="float:left;">            <div class="item">Content1</div>            <div class="item">Content2</div>            <div class="item">Content2</div>        </div>    </div></div></body></html>

效果图如下：

代码剖析：

id为table的div主要设置了float:left，使得该div可以适应子节点的大小而发生动态变化。
class为head的div设置了width:100%-3px，使得该div的宽度可以适应父节点宽度的变化而动态变化，-3px是因为该div设置了边框且边框宽度为1px，如果不减去3px，则该元素会出现超出的现象。
class为image的div设置了flaot:left，使得class为item的3个div没有换行效果了，其中第一个div可以移动上来

阅读全文

0 0