三栏布局左右固定中间自适应五种方式

实践是最好的老师

已于 2022-01-28 16:50:34 修改

阅读量404

点赞数

文章标签： html css css3

于 2020-08-31 20:56:23 首次发布

本文链接：https://blog.csdn.net/qq_26889291/article/details/108329150

版权

0 使用flex auto设置子元素不使用calc计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局左右固定中间自适应五种方式</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  background-color: yellow;
  flex: auto;
}

#flex-container > .raw-item {
    background-color: red;
  width: 5rem;
}


</style>

<body>
<div id="flex-container">
  <div class="raw-item" id="raw">Raw box</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

</body>

</html>


1. 父元素设置font-size为零不然有间隔
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局左右固定中间自适应四种方式</title>
</head>
<style>
    * {
        margin: 0;
    }

    div {
        font-size: 0;
        width: 100%;
    }

    div>p {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        display: inline-block;
    }

    .left,
    .right {
        background-color: yellow;
        width: 100px;
    }

    .middle {
        background-color: red;
        width: calc(100% - 200px);
    }
</style>

<body>
    <div>
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </div>
</body>

</html>

2.与第一种只将display:inline改成display: inline-flex;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局左右固定中间自适应四种方式</title>
</head>
<style>
    * {
        margin: 0;
    }

    div {
        font-size: 0;
        width: 100%;
    }

    div>p {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        display: inline-flex;
    }

    .left,
    .right {
        background-color: yellow;
        width: 100px;
    }

    .middle {
        background-color: red;
        width: calc(100% - 200px);
    }
</style>

<body>
    <div>
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </div>
</body>

</html>

通过float

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局左右固定中间自适应四种方式</title>
</head>
<style>
    * {
        margin: 0;
    }

    div {
        width: 100%;
    }

    div>p {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        display: inline-flex;
    }

    .left,
    .right {
        background-color: yellow;
        width: 100px;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .middle {
        background-color: red;
        width: calc(100% - 200px);
    }
</style>

<body>
    <div>
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </div>
</body>

</html>

通过position绝对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局左右固定中间自适应四种方式</title>
</head>
<style>
    * {
        margin: 0;
    }

    div {
        position: relative;
        width: 100%;
    }

    div>p {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        display: inline-flex;
    }

    .left,
    .right {
        position: absolute;
        background-color: yellow;
        width: 100px;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }

    .middle {
        background-color: red;
        width: calc(100% - 200px);
        margin-left: 100px;
    }
</style>

<body>
    <div>
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </div>
</body>

</html>