在我们开发或者面试中常常听到面试官问到这个问题,那么小伙伴们如何解答呢?
html代码:
<div class='aside'></div>
<div class='content'></div>
一,通过margin来设置:
css代码:
.
aside
{
width
:
210
px
;
height
:
400
px
;
background-color
:
forestgreen
;
float
:
left
;
}
.
content
{
height
:
400
px
;
margin-left
:
210
px
;
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
:
200
px
;
height
:
200
px
;
float
:
left
;
background-color
:
red
;
}
.
content
{
display
:
table-cell
;
width
:
3000
px
;
height
:
200
px
;
background-color
:
blue
;
}