Css之双列自适应布局

最新推荐文章于 2024-06-11 12:15:54 发布

li3196672779

最新推荐文章于 2024-06-11 12:15:54 发布

阅读量1.6k

点赞数

分类专栏： css布局

css布局专栏收录该内容

17 篇文章 0 订阅

订阅专栏

不论怎么拖动浏览器，左侧始终固定宽度

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            width: 100%;
            background: #000;
            position: relative;
            padding-left: 333px;
            box-sizing: border-box;
        }
        .side{
            width: 333px;
            height: 550px;
            background: #f88;
            position: absolute;
            left: 0;
        }
        .main{
            width: 100%;
            height: 550px;
            background: #ff88c2;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="side">
            <img src="img/test.jpg"width="100px" alt="as">
            <h2>Whenyou are old Side</h2>
            <p>When you are old and gray and full of sleep,</p>
        </div>

        <div class="main">
            <img src="img/test.jpg"width="100px" alt="aa">
            <h1>爱情Main</h1>
            <p>爱情就美在风险和运气,我们将自身转向了未知、神秘。</p>
        </div>
    </div>
</body>
</html>