学习CSS双飞翼

最新推荐文章于 2022-03-15 12:45:52 发布

R_T

最新推荐文章于 2022-03-15 12:45:52 发布

阅读量169

点赞数

分类专栏： Html Css

本文链接：https://blog.csdn.net/sugarf/article/details/52434172

版权

Html Css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习CSS 双飞翼布局*

这两天学习了双飞翼布局。双飞翼布局主要是为了解决左右两栏固定，中间部分自适应的问题。其中主要使用了float技术。

新建一个3列的项目分别设置宽度为

left：190，
middle：100%，
right： 190，

位置设置为relative， float; left.

这里写图片描述

代码如下

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>双飞翼布局</title>
        <link rel="stylesheet" href="css/layout .css" />
    </head>
    <body>
        <div class="header">
            <p>head</p>
        </div>
        <div class="container">
           <div class="middle">
           <p>middle</p>
           </div>
           <div class="left">
           <p>left</p>
           </div>
           <div class="right">
           <p>right</p>
           </div>
        </div>
        <div class="footer">
            <p>foot</p>
        </div>
    </body>
</html>

CSS

p{
    margin: 0px;
    padding: 0px;
    color: black;
}
.header,
.footer{
    border:1px solid black;
    background-color: gray;
    text-align: center;
}
.container{
    width: 100%;

}
.middle{
    float:left;
    width: 100%;
    min-height: 130px;
    background: red;
}
.left{
    position:relative;
    float:left;
    width: 190px;
    min-height: 130px;
    background: blue;
    margin-left: -100%;
}
.right{
    position:relative;
    float:left;
    width: 190px;
    min-height: 130px;
    background: yellow;
    margin-left: -190px;
}
.footer{
    clear:both;
}

注意到，middle div的text元素被left div所遮挡，这里的解决方法是，在middle中添加一个wrap，将内容写进wrap里面，然后使用css去调整wrap的位置。

代码修改为

<div class="middle">
<div class="wrap">  
<p>middle</p>
</div>
</div>

CSS

.wrap{
    margin-left:200px;
    margin-right:200px;
    background:red;
    min-height: 130px;
}

结果如下

可以看到文本 middle 出现了。

这个布局的关键在于将left和right向左浮动，当浮动值为负值时，便自动挤到了上一行。这里要主要，浮动值要大于宽度，否则就会出现div部分被挤出页面的情况。

这种布局的好处是可以先加载主列，兼容性较，便于后期修改。

REF

http://www.imooc.com/wenda/detail/254035

R_T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录