前端的一些布局方法

最新推荐文章于 2023-07-03 15:29:44 发布

qq_14846625

最新推荐文章于 2023-07-03 15:29:44 发布

阅读量62

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/qq_14846625/article/details/94316935

版权

前端笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表格布局（最古老的一种）

主要用表格table来布局
如这样

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style type="text/css">
   	table{
   		width: 800px;
   		height: 200px;
   		border-collapse: collapse; /*单元格之间的间隙去掉*/

   	}
   	.left{
   		background: red;
   	}
   	.right{
   		background: blue;
   	}


   </style>
</head>
<body>
 <table>
 	<tr>
 		<td class="left">1</td>
 		<td class="right">2</td>
 		<td class="left">2</td>
 		<td class="right">2</td>
 	</tr>
 	
 	<tr>
 		<td class="left">1</td>
 		<td class="right">2</td>
 		<td class="left">2</td>
 		<td class="right">2</td>
 	</tr>

 </table>


</body>
</html>

还有一种是用div去模仿表格布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">

    .table{
       display: table;
       width: 800px;
       height: 200px;


    }
    .tr{
    	display: table-row;

    }
    .td{
    	display: table-cell;
    	vertical-align: middle;
    }
    .left{
    	background: red;

    }
    .right{
    	background: blue;

    }


    </style>
</head>
<body>

<div class="table">
	<div class="tr">
		<div class="td left">1</div>
		<div class="td right">1</div>
	</div>
</div>


</body>
</html>

qq_14846625

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的一些布局方法

表格布局（最古老的一种）主要用表格table来布局如这样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫

专栏目录