IFE 20180708 多种方式分栏实现+作业完成

最新推荐文章于 2024-11-12 23:16:45 发布

Machiny

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量163

点赞数

分类专栏：前端项目文章标签： html css

本文链接：https://blog.csdn.net/Marie_M/article/details/111242674

版权

本文详细介绍了使用Float, Position和Flexbox实现分两栏和三栏布局的各种情况，包括两侧宽度固定、一侧固定另一侧自适应等。此外，还讲述了设计稿实现过程，涵盖头部、Banner、主导航、内容区域等部分的样式设计和问题解决策略。" 123205480,11828906,低代码平台选择指南：技术与安全的完美结合,"['低代码', '开发平台', '安全', '微服务']

摘要由CSDN通过智能技术生成

1. 分两栏

1.1 两侧宽度固定

左侧占30%宽度，右侧占70%宽度

1.1.1 Float

.left{
   
    background-color: bisque;
    float: left;
    width: 30%;
}
.right{
   
    float: right;
    background-color: yellow;
    width: 70%;
}

1.1.2 Position

body{
   
    margin: 0;
    text-align: center;/*显示方便*/
    position: relative;/*absolute定位依据*/
}
.left{
   
    background-color: bisque;
    width: 30%;
    position: absolute;
}
.right{
   
    background-color: paleturquoise;
    margin-left: 30%;
    overflow: hidden;/* 与BFC有关，为了让其不与left互相覆盖，且能参与高度计算 */
}

其中

.right{
   
    margin-left: 30%;
    overflow: hidden;
}
/*上面两句改成以下两句也有同样的效果
因为：float也满足 BFC 
*/
.right{
   
    width: 70%;
    float: right;
}

1.1.3 Flexbox

body{
   
    margin: 0;
    text-align: center;
    display: flex;/* 在需要设置为盒子的父元素中设置该语句 */
}
.left{
   
    background-color: bisque;
    width: 30%;
}
.right{
   
    background-color: paleturquoise;
    flex:1;
    /* 即：flex-grow:1;
    flex-grow定义项目（在剩余空间）的放大比例
    默认值为0，即如果存在是剩余空间，也不放大；
    如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
    
    此处为有且只有一个flex-grow，且为1，则占满所有剩余空间
    */
}

1.2 左侧固定，右侧自适应

左侧固定宽度432px，右侧根据浏览器宽度进行自适应变化

1.2.1 Float

.left{
   
    background-color: bisque;
    float: left;
    width: 432px;
}
.right{
   
    overflow: auto;
    background-color: paleturquoise;
}

1.2.2 Position

body{
   
    margin: 0;
    text-align: center; 
    position: relative;
}
.left{
   
    background-color: bisque;
    width: 432px;
    position: absolute;
}
.right{
   
    background-color: paleturquoise;
    margin-left: 432px;
    overflow: hidden;
}

1.2.3 Flexbox

body{
   
    margin: 0;
    text-align: center;
    display: flex;
}
.left{
   
    background-color: bisque;
    width: 432px;
}
.right{
   
    background-color: paleturquoise;
    flex:1;
}

1.3 右侧固定，左侧自适应

右侧固定宽度432px，左侧根据浏览器宽度进行自适应变化

1.3.1 Flout

.right{
   
    background-color: bisque;
    float: right;
    width: 432px;
}
.left{
   
    overflow: auto;
    background-color: paleturquoise;
}

同时 HTML 文档更改为

<body>
    <div class="right">
        <p>我是右栏</p>
    </div>
    <div class="left">
        <p>我是左栏</p>
    </div>
    <!-- 右栏在上 -->
</body>

1.3.2 Position

不改变 HTML 文档的情况下，实现代码如下

.left{
   
    background-color: bisque;
    margin-right: 432px;
    overflow: hidden;
}
.right{
   
    background-color: paleturquoise;
    width: 432px;
    position: absolute;
    top: 0;
    right: 0;
}

如果改变 HTML 文档，则 CSS 代码与“1.2.2 左侧固定，右侧自适应”一致，将 HTML 文档中的左栏和右栏的样式进行互换，同时将右栏反正左栏上方即可（类比上面的 Float 的实现）

1.3.3 Flexbox

body{
   
    margin: 0;
    text-align: center;
    display: flex;
}
.left{
   
    background-color: bisque;
    flex: 1;
}
.right{
   
    background-color: paleturquoise;
    width: 432px;
}