两列显示以及浮动布局

最新推荐文章于 2023-08-11 11:32:28 发布

如雨随行2020

最新推荐文章于 2023-08-11 11:32:28 发布

阅读量398

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22038259/article/details/82658228

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、两列宽度是窗口宽度的百分比
html:

<html>
    <head>
        <title>两列</title>
        <link rel = "stylesheet" type="text/css" href = "layout.css">
    </head>
    <body>
        <div id ="left"></div>
        <div id="right"></div>
    </body>
</html>

layout.css:

#left{
    background-color:#cccccc;
    border:2px solid#333333;
    width:20%;
    height:500px;
    float:left;
}
#right{
    background-color:lightgreen;
    border:2px solid#333333;
    width:70%;
    height:500px;
    float:right;
}

二、第一列宽度固定，第二列不舍宽度
第一列用float：left；第二列不要设置width。
否则，第二列将直接从第一列开头开始。并且和第一列重合的部分会被第一列覆盖。
html:

<html>
    <head>
        <title>div</title>
        <link rel = "stylesheet" type="text/css" href = "layout.css">
    </head>
    <body>
        <div id ="a">a</div>
        <div id="b">b</div>
    </body>
</html>

layout.css

#a{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:100px;
    float:left;
}
#b{
    background-color:lightgreen;
    border:2px solid#333333;
    height:100px;
    margin-left:200px;
}