浮动实现一侧定宽两栏自适应布局

最新推荐文章于 2023-05-14 09:05:56 发布

richest_qi

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量508

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/106614691

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

浮动实现两栏布局

<body>
<ul class="sidebar">
    <li><a href="#1">Hello world</a></li>
    <li><a href="#2">Installation</a></li>
</ul>
<div class="content">
    <div id="1">
        <h3>Hello world</h3>
        <div>Welcome to learning React</div>
    </div>
    <div id="2">
        <h3>Installation</h3>
        <div>You can install React from npm.</div>
    </div>
</div>
</body>

    .sidebar{
        float:left;
        list-style: none;
        padding:0;
    }

在这里插入图片描述

子元素浮动导致父元素高度塌陷
ul浮动前，其父元素body的高度是208.88px；ul浮动后，父元素的高度是148.16px。
后面的兄弟元素环绕浮动元素
ul浮动后，ul的兄弟元素div.content将跟随浮动元素排列，产生环绕效果。
比较搞笑的是，实现环绕效果是float的初衷，但为了布局我们常常想办法避免环绕效果。
比如，现在希望实现两栏布局，ul一栏，div.content一栏。为了避免环绕效果，给div.content设置比ul的宽度大的margin-left。

“惹不起，我还躲不起么？腾出120px宽的位置给你，你爱咋浮咋浮！”

    .sidebar{
        float:left;
        list-style: none;
        padding:0;
    }
    .content{
        margin-left:120px;
    }

在这里插入图片描述

几个例子

例1：图片在左，文本在右

    img{
        float:left;
    }
    div{
        margin-left:440px;
    }

<body>
    <img src="./imgs/doraemon.gif">
    <div>哆啦A梦（日语：ドラえもん），旧译为机器猫，是藤子·F·不二雄的漫画作品《哆啦A梦》中登场的猫型机器人，本作的主人公。名字的意思是铜锣（ドラ）卫门（えもん）。
        哆啦A梦肚子上拥有四次元口袋，这个口袋直接通往四次元空间，再多的东西也放得下。害怕老鼠。平时的职责是照顾野比大雄。</div>
</body>

例2：图片在右，文本在左

    img{
        float:right;
    }
    div{
        margin-right:440px;
    }

<body>
    <img src="./imgs/doraemon.gif">
    <div>哆啦A梦（日语：ドラえもん），旧译为机器猫，是藤子·F·不二雄的漫画作品《哆啦A梦》中登场的猫型机器人，本作的主人公。名字的意思是铜锣（ドラ）卫门（えもん）。
        哆啦A梦肚子上拥有四次元口袋，这个口袋直接通往四次元空间，再多的东西也放得下。害怕老鼠。平时的职责是照顾野比大雄。</div>
</body>

例3：图片在右，文本在左
例2中，图片在右文本在左与 html中标签的顺序不一致。这次，在html中调整下顺序。

    img{
        float:right;
    }
    div{
        margin-right:440px;
    }

<body>
    <div>哆啦A梦（日语：ドラえもん），旧译为机器猫，是藤子·F·不二雄的漫画作品《哆啦A梦》中登场的猫型机器人，本作的主人公。名字的意思是铜锣（ドラ）卫门（えもん）。
        哆啦A梦肚子上拥有四次元口袋，这个口袋直接通往四次元空间，再多的东西也放得下。害怕老鼠。平时的职责是照顾野比大雄。</div>
    <img src="./imgs/doraemon.gif">
</body>

但是，情况不妙！ div和img不在一行上。
这挺好解释的。
css文档流默认是从上到下，从左到右排列。div在前，img在后，所以div占了上面那行。img浮动，使其父元素body高度塌陷，但仍然占据流空间，所以就顺着div往下了。
在这里插入图片描述

好吧，解决方法是使用负的margin，margin-left:-440px。

    img{
        float:right;
        margin-left:-440px;
    }   
    div{
        float:left;
        margin-right:440px;
    }

浮动实现两栏布局，一栏得定宽

下面这个例子和例3 差不多。

    #left{
        float:left;
        margin-right:500px;
    }
    #right{
        float:right;
        margin-left:-500px;
    }

<body>
<div id="left">向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走</div>
<div id="right">向右走 向右走 向右走 向右走  向右走 向右走 向右走 </div>
</body>

在这里插入图片描述
但是，如果多写点 “向右走”，也就是把div#right变宽些，情况就糟糕了。

<body>
<div id="left">向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走 向左走 向左走 向左走 向左走  向左走  向左走  向左走  向左走  向左走</div>
<div id="right">向右走 向右走 向右走 向右走  向右走 向右走 向右走 向右走 向右走 向右走 向右走  向右走 向右走 向右走 </div>
</body>

在这里插入图片描述

好吧，把div#left的margin-right和div#right的margin-left都调大点。

    #left{
        float:left;
        margin-right:800px;
    }
    #right{
        float:right;
        margin-left:-800px;
    }

在这里插入图片描述
因此，浮动能够实现两栏布局，但其中一栏必须宽度固定。

浮动实现三栏布局

浮动实现三栏布局其实就是浮动实现两栏布局的一个扩展，因此保留了两栏布局的局限，需要定宽，否则无法形成多栏布局。

    #left{
        float:left;
    }
    #middle{
        float:left;
        margin-left:200px;
        margin-right:300px;
    }
    #right{
        float:right;
        margin-left:-300px;
    }

<body>
<div id="left">向左走 向左走 向左走 向左走 向左走 向左走</div>
<div id="middle">原地踏步 原地踏步 原地踏步 原地踏步 原地踏步 原地踏步</div>
<div id="right">向右走 向右走 向右走 向右走 向右走 向右走</div>
</body>

在这里插入图片描述

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动实现一侧定宽两栏自适应布局

浮动实现一侧定宽两栏自适应布局。例1：图片在左，文本在右 img{ float:left; } div{ margin-left:440px; }<body> <img src="./imgs/doraemon.gif"> <div>哆啦A梦（日语：ドラえもん），旧译为机器猫，是藤子·F·不二雄的漫画作品《哆啦A梦》中登场的猫型机器人，本作的主人公。名字的意思是铜锣（ドラ）卫门（え
复制链接

扫一扫