前端小笔记:左定宽,右随意

一、要求

想实现左右布局,左边是部分定宽度200px,右边部分自动铺满剩下部分。

二、思路

基本HTML架子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/layout1.css">
</head>
<body>
    <div class="container">
        <div class="left">
            我是左边
        </div>
        <div class="right">
            我是右边
        </div>
    </div>
</body>
</html>

1. 左边div向左浮动,并设置width为200px.

2. 右边div因为左边div脱离文档流,会自动往上靠,然后设置padding-left:200px,内容就会自动从视觉上的右边开始。

* {
    padding: 0;
    margin: 0;
}

.container {
     100%;
    height: 1000px;
}

.left {
     200px;
    height: 1000px;
    background: greenyellow;
    float: left;
}

.right {
    background: beige;
    height: 1000px;
    padding-left: 200px;
    /* 100%;*/
}
原文地址:https://www.cnblogs.com/LiuChunfu/p/5795692.html