实现网格布局的两种方法

实现网格布局的两种方法
本文介绍了光栅布局的2种简单方法,并附有实例代码。非常实用。这是给你的推荐信。
1。使用float:
复制代码代码如下所示:

部分
{
border: solid 1px;
}
节段
{
浮点数:左;
左:10px保证金;
边距:10px;
文本对齐:中心;
宽度:200px;
边界半径:20px;
身高:200px;
}
父母。
{
身高:440px;
宽度:660px;
}
家长节:第一个孩子
{
身高:410px;
}


B
C
D
E
两。使用显示:Flex(这款CSS3属性只有谷歌和Firefox)
复制代码代码如下所示:

部分
{
border: solid 1px;
}
节段
{
左:10px保证金;
边距:10px;
文本对齐:中心;
宽度:200px;
边界半径:20px;
身高:200px;
}
父母。
{
显示:flex;
弯曲方向:圆柱;
包装纸;
身高:440px;
宽度:660px;
}
家长节:第一个孩子
{
身高:410px;
}


B
C
D
E
实现效果如图所示。
当然,使用表和负边距也可以实现,需要时间来填充:d

以上是本文所描述的全部内容,希望您能喜欢。

tag:方法网格布局两种电脑软件

相关内容