关于css常见4种左边固定,右边自适应的布局

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36202069/article/details/79014091

在我们开发或者面试中常常听到面试官问到这个问题,那么小伙伴们如何解答呢?

html代码:

  <div class='aside'></div>

<div class='content'></div>

一,通过margin来设置:

css代码:

.aside{
width:210px;
height:400px;
background-color:forestgreen;
float:left;
}
.content{
height:400px;
margin-left:210px;
background-color:orange;

}

二:通过触发btc实现

css代码:

.aside{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.content{
overflow: hidden;
height: 200px;
background-color: blue


三:通过flex布局:

这里不详细叙述,关于flex布局可以参见阮一峰的flex布局教程:flex布局教程


四:通过display:table-cell实现

css代码:

aside{
width:200px;
height:200px;
float:left;
background-color:red;
}
.content{
display:table-cell;
width:3000px;
height:200px;
background-color:blue;
}


展开阅读全文

没有更多推荐了,返回首页