js三栏布局

最新推荐文章于 2023-08-24 09:32:17 发布

旺仔布丁

最新推荐文章于 2023-08-24 09:32:17 发布

阅读量1.1k

点赞数 1

分类专栏：笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/hcyhcyhcy_/article/details/123734594

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一

先center center宽100%。左中右浮动左右margin-left上去。 container设置左右padding。三个position:relative，左右left right。

先定义好header和footer的样式，使之横向撑满。
在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。
三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满
这样因为浮动的关系，center会占据整个container，左右两块区域被挤下去了
接下来设置left的 margin-left: -100%;，让left回到上一行最左侧
但这会把center给遮住了，所以这时给外层的container设置 padding-left: 200px;padding-right: 150px;，给left和right空出位置
这时left并没有在最左侧，因为之前已经设置过相对定位，所以通过 left: -200px; 把left拉回最左侧
同样的，对于right区域，设置 margin-left: -150px; 把right拉回第一行
这时右侧空出了150px的空间，所以最后设置 right: -150px;把right区域拉到最右侧就行了。

   <style>
        body {
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }

        #footer {
            clear: both;
        }

        #container {
            background-color: green;
            padding-left: 100px;
            padding-right: 100px;
        }

        .column {
            height: 200px;
            float: left;
            position: relative;
        }

        #center {
            width: 100%;
            background-color: yellow;

        }

        #left {
            background-color: orange;
            width: 100px;
            margin-left: -100%;
            left: -100px
        }

        #right {
            background-color: pink;
            width: 100px;
            margin-left: -100px;
            right: -100px
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="center" class="column">center</div>
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

二

先center，包含div， center宽100%。左中右浮动左右margin-left上去。content设置左右margin。

left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

   <style>
        body {
            min-width: 700px;
        }

        #top,
        #footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }

        #footer {
            clear: both
        }

        #container {}

        .column {
            height: 200px;
            float: left;
        }

        #left {
            width: 100px;
            background-color: green;
            margin-left: -100%
        }

        #center {
            width: 100%;
            background-color: yellow;

        }

        #right {
            width: 100px;
            background-color: pink;
            margin-left: -100px;
        }

        .content {
            margin: 0 100px 0 100px;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="center" class="column">
                <div class="content">#center</div>
            </div>
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

flex

flex弹性盒子

header和footer设置样式，横向撑满。
container中的left、center、right依次排布即可
给container设置弹性布局 display: flex;
left和right区域定宽，center设置 flex: 1; 即可

    <style>
        body{
            min-width: 700px
        }
        #top,#footer{
            width: 100%;
            height: 200px;
            background-color: red;
        }
        #container{
            display: flex;
        }
        .column{
            height: 300px;
        }
        #left{
            width: 100px;
            background-color: green;
        }
        #right{
            width: 100px;
            background-color: green;
        }
        #center{
            flex: 1;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="left" class="column">left</div>
            <div id="center" class="column">center</div>
            <div id="right" class="column">right</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

四.绝对定位法

将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度,注意中间元素不设置width:100%.

    <style>
         body {
            margin: 0px;
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }
        #container {
            background-color: green;
            
        }

        .column {
            height: 200px;
        }

        #center {
            /* width: 100%;没有这个 */
            background-color: yellow;
            margin: 0 100px;

        }

        #left {
            position: absolute;
            background-color: orange;
            width: 100px;
            left: 0;
        }

        #right {
            position: absolute;
            background-color: pink;
            width: 100px;
            right: 0;
        }
    </style>
</head>
<body>
    <div>
        <div id="top"></div>
        <div id="container">            <div id="left" class="column">left</div>   
            <div id="right" class="column">right</div>                    
            <div id="center" class="column">center</div>
        </div>
        <div id="footer"></div>
    </div>

五.使用自身浮动法

对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<style>
       body {
            margin: 0px;
            min-width: 500px
        }

        #top,
        #footer {
            background-color: red;
            height: 200px;
        }

        #container {
            background-color: green;

        }

        .column {
            height: 200px;
        }

        #center {
            /* width: 100%;没有这个 */
            background-color: yellow;
            margin: 0 100px;

        }

        #left {
            float:left;
            background-color: orange;
            width: 100px;
           
        }

        #right {
            float: right;
            background-color: pink;
            width: 100px;
        }
    </style>
</head>

<body>
    <div>
        <div id="top"></div>
        <div id="container">
            <div id="left" class="column">left</div>
            <div id="right" class="column">right</div>
            <div id="center" class="column">center</div>
        </div>
        <div id="footer"></div>
    </div>
</body>

旺仔布丁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js三栏布局

一先center center宽100%。左中右浮动左右margin-left上去。 container设置左右padding。三个position:relative，左右left right。先定义好header和footer的样式，使之横向撑满。在container中的三列设为浮动和相对定位(后面会用到)，center要放在最前面，footer清除浮动。三列的左右两列分别定宽200px和150px，中间部分center设置100%撑满这样因为浮动的关系，center会占据整个conta
复制链接

扫一扫

专栏目录