ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

直播软件怎么开发,自适应两栏布局方式 - 云豹科技

直播软件怎么开发,自适应两栏布局方式 - 云豹科技

直播软件怎么开发,自适应两栏布局方式

html结构

  <body><div class="wrapper"><div class="left"></div><div class="right"></div></div></body>

方法一:flex布局

.wrapper{display:flex;
}
.left{width:200px;height:400px;background:black;
}
.right{flex:1;height:400px;background:red;
}

方法二:浮动

.left{float:left;width:200px;height:400px;background:black;
}
.right{background:red;height:400px;
}

方法三:BFC

.left{width:200px;height:400px;float:left;background:black;
}
.right{overflow:hidden;height:400px;background:red;
}

方法四:position绝对定位

.wrapper{position:relative;
}
.left{width:200px;height:400px;background:black;
}
.right{position:absolute;top:0;left:200px;right:0;bottom:0;background:red;
}

方法五:table布局

.wrapper{display:table;width:100%;
}
.left,.right{display:table-cell;height:400px
}
.left{background:black;
}
.right{background:red;
}

方法六:grid布局

.wrapper{display:grid;width:100%;height:400px;grid-template-columns:200px auto;
}
.left{background:black;
}
.right{background:red;
}

以上就是直播软件怎么开发,自适应两栏布局方式, 更多内容欢迎关注之后的文章

返回列表