代码改变世界

little box:three column

  youxin  阅读(281)  评论(0)  编辑  收藏  举报
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
    margin:0;
    padding:0;
    color:#ccc;
    background-color:#333;
}
#left{
    position:absolute;
    top:0;
    left:0;
    margin:20px;
    padding:10px;
    border:5px solid #ccc;
    background:#666;
    width:120px;
}

#middle{
    margin:20px 190px;
    padding:10px;
    border:5px solid #ccc;
    background:#666;
}
#right{
    position:absolute;
    top:0;
    right:0px;
    margin:20px;
    padding:10px;
    border:5px solid #ccc;
    background:#666;
    width:120px;
}
</style>
</head>

<body>
<div id="left">
    <p>1</p>
</div>

<div id="middle">
 
    <pre>
    
    #left {
    position: absolute; 
    top: 0px;
    left: 0px;
    margin: 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
html>body #left {
    width: 120px; /* ie5win fudge ends */
    }
#middle {
    margin: 20px 190px 20px 190px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    }
#right {
    position: absolute;
    top: 0px;
    right: 0px; /* Opera5.02 will show a space 
    at right when there is no scroll bar */
    margin: 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    width: 150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 120px;
    }
html>body right {
    width: 120px; /* ie5win fudge ends */
    }
</pre>
<div align="right"><p><a href="css/03_3column.css">[full css]</a></p></div>

</div>

<div id="right">
    <p>1</p>
 </div>
</body>
</html>
复制代码

设置position:absolute的元素是从文档中移去的（left和right的div都不占空间），为什么middle会显示在中间？

因为

margin:20px 190px;

  设置了距左边和右边都是190。
为了证明position:absolute不占空间，可以在div id="left"后面增加一个div，看到div是直接显示在左上角的。

显示如下：

http://www.thenoodleincident.com/tutorials/box_lesson/basic3.html

编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示