display表格布局
时间: 2023-11-08 18:03:45 浏览: 49
表格布局可以使用CSS的display属性来实现。有两种常用的表格布局方式:table和flex。
使用display: table布局时,可以将一个父元素设为display: table,子元素设为display: table-cell,从而实现表格布局效果。这种方式适用于需要支持较旧浏览器的情况。
示例代码如下:
```html
<div style="display: table; width: 100%;">
<div style="display: table-row;">
<div style="display: table-cell; width: 50%;">单元格1</div>
<div style="display: table-cell; width: 50%;">单元格2</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; width: 50%;">单元格3</div>
<div style="display: table-cell; width: 50%;">单元格4</div>
</div>
</div>
```
使用flex布局时,可以通过设置父容器的display为flex,子元素的flex属性来实现表格布局效果。这种方式在现代浏览器中有更好的兼容性和灵活性。
示例代码如下:
```html
<div style="display: flex; flex-wrap: wrap;">
<div style="flex-basis: 50%;">单元格1</div>
<div style="flex-basis: 50%;">单元格2</div>
<div style="flex-basis: 50%;">单元格3</div>
<div style="flex-basis: 50%;">单元格4</div>
</div>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)