绕了一大圈，只是因为auto是相对父元素的 —— 中栏流动布局中的一个小问题

Gu_Yan 发布于2019-08-29 11:28 / 2272人阅读

摘要：这里，要注意到并没有浮动，我试了一下让它浮动，它就变成了这个样子原来，的自动宽度是相对于父元素的，它会把父元素剩余的部分全部撑满，而左右栏是浮动的，因此并不占据空间。

问题是这样的，先上图：

最初我的想法很简单，三个浮动的栏，左右两边固定宽度，中栏宽度为auto，但是一个用负外边距实现的解决方案让我很费解，方案是这样的：

html代码：




    
    Layout Test
    


    
        
            Architecting Your App in Ext JS 4
        

         

             
                
            
                Part 1
                Part 2
                Part 3
            
        

        
            
                Code Organization
                The scalability, maintainability and flexibility of an ...
            
            
            
 

            
                We have illustrated that by using some advanced controller ... 
            
            
        
 
    

        
            Application architecture is as much about providing ...

CSS代码：

* {
    margin: 0;
    padding: 0;
}

body {
    font: 1em helvetica,arial,sans-serif;
}

div#mian_wrapper {
    min-width: 600px;
    max-width: 1100px;
    /*超过最大宽度时，布局居中*/
    margin: 0 auto;
}

header {
    padding: 5px 10px;
    background: #3f7ccf;
}

div#threecolwrap {
    /*浮动强制它包围浮动的栏*/
    float: left;
    width: 100%;
}

div#twocolwrap {
    float: left;
    width: 100%;
    /*把右栏拉到区块外边距腾出的位置上*/
    margin-right: -210px;
}

nav {
    padding: 20px 0px;
    width: 150;
    float: left;
    background: #f00;
}

nav li {
    /*去掉列表项目符号*/
    list-style-type: none;
}

nav > *{margin: 0 10px}

article {
    width: auto;
    /*float: left;*/
    background: #eee;
    padding: 20px 0px;
    margin-left: 150px;
    /*在流动居中的栏右侧腾出空间*/
    margin-right: 210px;
}

article > *{
    margin: 0 20px;
}
   
aside {
    padding: 20px 0px;
    float: left;
    background: #ffed53;
    width: 210;
}

aside > *{
    margin: 0 10px;
}

footer {
    clear: both;
    width: 100%;
    text-align: center;
    background: green;
}

以上方案大致是：将左中栏和左中右栏分别用div包裹，然后给twocolwrap设了-210px的右外边距，article设了210px的右边距，因为前面自己愚蠢的想法导致很不能理解这个方案。

这里，要注意到article并没有浮动，我试了一下让它浮动，它就变成了这个样子：

原来，article的自动宽度是相对于父元素的，它会把父元素剩余的部分全部撑满，而左右栏是浮动的，因此并不占据空间。

这样一来，我才明白了上面那个方案要干什么，应该不用多说了。。。

GPU云服务器云服务器只是因为 js找父元素的兄弟布局遇到的问题相对布局html

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

转载请注明本文地址：https://www.ucloud.cn/yun/111666.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
三栏布局-中栏流动布局的方式

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

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

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

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

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

Forelax 2019-08-02 14:31 评论0 收藏0