有关div布局的position:absolute属性

最新推荐文章于 2023-10-21 09:42:12 发布

biannoon

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量1k

点赞数

文章标签：界面 html div布局 css

今天为了完成任务，把界面做出，我使用的是CSS，开始我是要在一个层里面嵌入三个层，而且嵌入的三个层里面有一个大的层得嵌入另外两层，我们来做个比方吧，1代表最外层，2代1包围的次外层，而3和4是被2包围的2个层，按常规思想一个很顺利的完成，定义四个<div>就可以了，但是就在做3和4两层的时候，这么也不能对齐，我想让3和4在2里面水平放置，但我无论这么修改尺寸就是不能水平对齐，就像下图：

代码是这样的

<html>
<body>
<body>
<div style="width:300px;height:60px;border:1px solid red">
    <div style="width:150px;height:40px;margin-top:10px;border:1px solid blue">
         <div style="width:100px;height:20px;margin-left:10px;margin-top:10px;border:1px solid yellow">3</div>
         <div style="width:30px;height:20px;margin-left:10px;margin-top:10px;border:1px solid #126556">4</div>
     2</div>
1</div>
</html>

想了N久还是没弄明白，后来只有找到CSS手册查阅一番，试了N个，终于出来，正如题目上所写的，就缺少这个属性代码如下

<html>
<body>
<body>
<div style="width:300px;height:60px;border:1px solid red">
<div style="width:150px;height:40px;margin-top:10px;border:1px solid blue">
<div style=" position:absolute;width:100px;height:20px;margin-left:10px;margin-top:10px;border:1px solid yellow">4</div>
<div style=" position:absolute;width:30px;height:20px;margin-left:110px;margin-top:10px;border:1px solid #123456">3</div>
2</div>
1</div>
</html>

结果为：