您的当前位置：首页正文

面试官：动手实现一个左右固定100px，中间自适应的三列布局？(至少三种)

来源：欧得旅游网

<div id="father">
      <div id="son"></div>
</div>

1、用calc

#father {
    width: 600px;
    height: 200px;
    background-color: black;
}

#son {
    width: calc(100% - 200px);
    height: 100%;
    background-color: green;
    margin: 0 100px;
}

2、用flex

#father {
    width: 600px;
    height: 200px;
    background-color: black;
    display: flex;
}

#son {
    flex: 1;
    height: 100%;
    margin: 0 100px;
    background-color: green;
}

3、用padding

#father {
    width: 400px;
    height: 200px;
    background-color: black;
    padding: 0 100px;
}

#son {
    width: 100%;
    height: 100%;
    background-color: green;
}