css双列布局 - 绝对定位

最新推荐文章于 2022-08-07 22:19:26 发布

冫水阔落

最新推荐文章于 2022-08-07 22:19:26 发布

阅读量210

点赞数

文章标签： css

本文链接：https://blog.csdn.net/HAINIHAOya/article/details/123761267

版权

css双列布局 - 绝对定位

通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。
现在给类名为"container"的父盒子添加"position:relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position:absolute"、“left: 0"和"width:100px"三条属性，使该盒子定位到父盒子的最左边并且赋予宽度，但高度是根据内容自适应的。最后给类名为"right"的盒子添加"position:absolute”、“left: 100px"和"right: 0px”，因为该盒子没有给定宽度，设置"left"和"right"定位属性会使内容区保留在这个范围内，同样实现了自适应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .left {
                border: 1px solid black;
                position:absolute;
                width:100px;
            }
            .right {
                border: 1px solid black;
                position:absolute;
                left:100px;
                right:0px;//自适应
            }
            .container{
                position:relative;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

冫水阔落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css双列布局 - 绝对定位

css双列布局 - 绝对定位通过绝对定位实现的双列布局看起来会比较僵硬，因为父盒子首先需要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。现在给类名为"container"的父盒子添加"position:relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position:absolute"、“left: 0"和"width:100px"三条
复制链接

扫一扫