三栏布局-中栏流动布局的方式

xiongzenghui 发布于2019-08-29 15:09 / 601人阅读

摘要：方法首先使用一个包住左侧栏和中间栏，再用一个大的包住左中右三个栏。如下面代码所示这是左边栏这是中间栏这是右边栏那么具体布局代码如下这个方法的主要思想是布局中栏的时候，要把设置为，保证中栏的宽度自适应。

方法1

首先使用一个wrap包住左侧栏和中间栏，再用一个大的wrap包住左中右三个栏。

如下面代码所示

那么具体布局代码如下

        .fuwrap  {
            float: left;
            width: 100%;
        }
        
        .ziwrap{
            float: left;
            width: 100%;
            margin-right: -250px;
            height: 100px;
        }
        .left{
            float: left;
            width: 150px;
            background-color: red;
            height: 98px;
        }
        .middle{
            width: auto;
            background-color: green;
            height: 98px;
            margin-right: 250px;
            margin-left: 150px;
            word-wrap:break-word
        }
        .middle *{
            margin-left: 20px;
        }
        .right{
            float: left;
            width: 250px;
            background-color: peachpuff;
            height: 98px;
        }

这个方法的主要思想是布局中栏的时候，要把width设置为auto，保证中栏的宽度自适应。将中栏的左边margin设置为左边栏的宽度，留出左边栏的位置，同时将margin-right设置为ziwrap的margin-right的相反值，这样既能在ziwrap布局后留出右边栏的位置，还能保证中间栏的内容不被右边栏所遮挡住。

效果如下

方法2

使用绝对定位

将三个栏用一个fuwrap包围住，然后将左栏定位到左上角，右边栏定位到右上角，不设置中间栏的宽度，设置其左右margin分别为左右栏的宽度，就可以了。



    
        这是左边栏
    

    
        这是中间栏
    

    
        这是右边栏

布局代码为

       .fuwrap {
            position: relative;
            width: 100%;
        }
        .left{
            width: 150px;
            background-color: red;
            height: 98px;
            top: 0px;
            left: 0px;
            position:absolute;
        }
        .middle{
            background-color: green;
            height: 98px;
            word-wrap:break-word;
            margin-left: 150px;
            margin-right: 250px;
        }
        .middle *{
            margin-left: 20px;
        }
        .right{
            width: 250px;
            background-color: peachpuff;
            height: 98px;
            top: 0px;
            right: 0px;
            position:absolute;
        }

效果图同方法1

方法3

这种方式是使用css3 display:table-cell



    
        这是左边栏
    

    
        这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏这是中间栏
    

    
        这是右边栏

布局代码

.fuwrap{
            width: 100%;
        }
        .left{
            width: 150px;
            background-color: red;
            height: 98px;
            display:table-cell
        }
        .middle{
            background-color: green;
            height: 98px;
            word-wrap:break-word;
            display:table-cell;

        }

        .right{
            width: 250px;
            background-color: peachpuff;
            height: 98px;
            display:table-cell
        }

这种方式虽说也能实现中栏流动布局，但是中间栏中必须有内容撑开中间栏。

效果图：

如果没有足够的内容撑开，就会出现下面的情况

云服务器 GPU云服务器三栏布局 html5 三栏布局 android布局方式 html的布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113136.html

CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 评论0 收藏0
CSS入门指南-4：页面布局

摘要：属性是中最重要的用于控制布局的属性。布局的高度多数情况下，布局中结构化元素乃至任何元素的高度是不必设定的。更新效果如图以上措施使布局有了明显改观。这是《CSS设计指南》的读书笔记，用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
绕了一大圈，只是因为auto是相对父元素的 —— 中栏流动布局中的一个小问题

摘要：这里，要注意到并没有浮动，我试了一下让它浮动，它就变成了这个样子原来，的自动宽度是相对于父元素的，它会把父元素剩余的部分全部撑满，而左右栏是浮动的，因此并不占据空间。问题是这样的，先上图：showImg(https://segmentfault.com/img/bVElrr?w=953&h=368);最初我的想法很简单，三个浮动的栏，左右两边固定宽度，中栏宽度为auto，但是一个用负...

Gu_Yan 2019-08-29 11:28 评论0 收藏0