搜索
您的当前位置:首页正文

面试官:动手实现一个左右固定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;
}

因篇幅问题不能全部显示,请点此查看更多更全内容

热门图文

Top