三列显示

最新推荐文章于 2023-11-23 16:11:23 发布

如雨随行2020

最新推荐文章于 2023-11-23 16:11:23 发布

阅读量199

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

两列固定宽度，第三列居中显示
注：虽然css里面已经规定了body的margin和padding为0，但似乎body还是有margin-top：8px；
margin-left/margin-right:10px

html：

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

layout.css

#left{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:500px;
    position:absolute;
    top:8px;left:0px;
}
#right{
    background-color:lightgreen;
    border:2px solid#333333;
    width:100px;
    height:500px;
    position:absolute;
    top:8px;right:0px;
}
#center {
    background-color:red;
    border:2px solid#333333;
    height:500px;
    margin-top:0px;
    margin-left:96px;
    margin-right:96px;
}
#body{margin:0px;padding:0px;}

ps：找到问题了，原来的css只对body进行处理，没有对html进行处理

#left{
    background-color:#cccccc;
    border:2px solid#333333;
    width:100px;
    height:500px;
    position:absolute;
    top:0px;left:0px;
}
#right{
    background-color:lightgreen;
    border:2px solid#333333;
    width:100px;
    height:500px;
    position:absolute;
    top:0px;right:0px;
}
#center {
    background-color:red;
    border:2px solid#333333;
    height:500px;
    margin-top:0px;
    margin-left:104px;
    margin-right:104px;
}
html,body{margin:0px;padding:0px;}