CSS常用布局方式-两列布局、三列布局

最新推荐文章于 2022-12-20 23:45:00 发布

LKFOOD

最新推荐文章于 2022-12-20 23:45:00 发布

阅读量951

点赞数

分类专栏： CSS学习文章标签： CSS布局

本文链接：https://blog.csdn.net/LKFOOD/article/details/88779340

版权

本文详细介绍了CSS布局的五种常见方式，包括table布局、flexbox布局、float布局、inline-block布局以及响应式布局。针对每种布局方式，提供了示例代码和页面效果描述，帮助理解其特点和应用场景。同时，文章还解答了关于CSS布局的常见问题，如清除浮动、inline-block间隙处理等。

摘要由CSDN通过智能技术生成

CSS基础

2.几种布局方式
1）table布局
当年主流的布局方式，第一种是通过table tr td布局
示例：

<style type="text/css">
		table{
			width: 800px;
			height: 300px;
			border-collapse: collapse;
		}
		.left{
			background-color: red;

		}
		.right{
			background-color: blue;
		}
</style>
<body>
<table>
	<tr>
		<td class="left">左</td>
		<td class="right">右</td>
	</tr>
</table>
</body>

页面效果：文字自动垂直居中，很方便同样可以设置左右的width
在这里插入图片描述
第二种是类比表格的table class
示例：

<style type="text/css">
		.table{
			display: table;
			width: 800px;
			height: 300px;
			/*border-collapse: collapse;*/

		}
		.tb_row{
			display: table-row;
		}

		.tb_cell{
			display: table-cell;
			vertical-align: middle;
		}


		.left{
			background-color: red;
		}
		.right{
			background-color: blue;
		}
		table 
</style>
<body>
<div class="table">
	<div class="tb_row">
		<div class="left tb_cell">左</div>
		<div class="right tb_cell">右</div>
	</div>
</div>
</body>

页面效果：跟表格布局一样