两种不同的方法来实现一个两列布局

最新推荐文章于 2022-12-22 17:24:25 发布

梦jenny

最新推荐文章于 2022-12-22 17:24:25 发布

阅读量651

点赞数

分类专栏：布局 CSS 文章标签： css 盒模型布局

本文链接：https://blog.csdn.net/lulalahappy123/article/details/45116781

版权

CSS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

布局

13 篇文章 0 订阅

订阅专栏

用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .div-a{
            background-color: #ccf;
            float:left;
            width: 200px;


        }
        .div-b{
            background-color: #ee7700;/*右侧和下侧什么也不用写*/

        }
        .div-c{
            background-color: #99FF99;

        }
    </style>
</head>
<body>
<div class="div-a">左侧部分宽度固定</div>
<div class="div-b">右侧部分宽度随浏览器宽度的变化而自适应变化</div>
<div class="div-c">这里是下半部分</div>
</body>
</html>

以上这个布局有问题：原因在于：浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
那么按理说div-a浮动后，不占文档流中的位置，div-b应该被遮盖，是这样吗？
答案是：yes
调整了一下代码，换了半透明背景
方法一：使用float浮动，自适应div只需调整margin

<span style="color:#333333;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" name="第一种">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .div-a{
            background-color: rgba(255,255,255,0.5);
            float:left;
            width: 200px;
        }
        .div-b{
            background-color: rgba(249,38,114,0.5);/*为什么文字还看得见*/
            </span><span style="color:#ff6666;">/*margin-left: 200px;*//*正确答案需要加上*/</span><span style="color:#333333;">
        }
        .div-c{
            background-color: #99FF99;
            </span><span style="color:#ff0000;">clear: both;</span><span style="color:#333333;">
        }
    </style>
</head>
<body>
<div id="content">
    <div class="div-a">左侧部分宽度固定</div>
    <div class="div-b">右侧部分宽度随浏览器宽度的变化而自适应变化</div>
    <div class="div-c">这里是下半部分</div>
</div>
</body>
</html></span>

注意结尾清除浮动
结果发现：div-b不加

<span style="color:#ff6666;">margin-left: 200px;</span>

div-a设置的白色半透明背景，变了颜色，说明div-a其实已经遮挡了div-b的一部分
所以给div-b加上margin-left是个明智的选择
但是，又有个疑问，既然不加margin-left:200px的div-b被遮盖了部分背景，为何文字却能正常的显示出来，而不是重叠在div-a文字那里？？
方法二：绝对定位，自适应的div只需调整margin

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" name="第一种">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }


        .div-a{
            background-color: #ccf;
            position: absolute;
            left: 0;
            width: 200px;
            top:0;
        }
        .div-b{
            background-color: #ee7700;/*左侧顶宽 右侧自适应*/
            margin-left: 200px;
        }
        .div-c{
            background-color: #99FF99;

        }

    </style>
</head>
<body>

    <div class="div-a">左侧部分宽度固定</div>
    <div class="div-b">右侧部分宽度随浏览器宽度的变化而自适应变化</div>
    <div class="div-c">这里是下半部分</div>


</body>
</html>