html+CSS布局实例：面试题：使用CSS控制三个div，实现以下布局

The..Fuir

已于 2022-04-03 19:27:40 修改

阅读量1k

点赞数 1

分类专栏： css html 面试文章标签： css html 面试

于 2022-03-17 20:52:29 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/123560050

版权

面试同时被 3 个专栏收录

152 篇文章 51 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

问题描述：

面试题：使用CSS控制三个div，实现以下布局

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        /* 面试题 */
        div {
            background-color: teal;
        }
        .first {
            height: 150px;
            width: 100px;
            float: left;
        }
        .second {
            height: 150px;
            width: 100px;
            clear: left;
            float: left;
            margin-top: 10px;
        }
        .third {
            width:200px;
            height:310px;
            margin-left: 110px;
        }
    </style>
</head>
<body>
    <div class="first">1</div>
	<div class="second">2</div>
	<div class="third">3</div>
</body>
</html>

盒子模型的基本知识你得了解！！！

设置margin-top是隔上边距间隔50px的距离

第二种:三个div实现自适应布局

效果图：随着页面比例右边实现自适应，而左边固定像素大小

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="left-top">左上框</div>
     <div class="right">右</div>
    <div class="left-bottom">左下框</div>
</body>
</html>
<style>
    .left-top{
        width: 500px;
        height: 300px;
        background-color: aqua;
        float: left;
    }
    /* .clear{
        clear: left;
    } */
    .right{
       width: calc(100% - 550px);
        height: 650px;     
        background-color: aquamarine;
        float: right;
     
    }
    .left-bottom{
        margin-top: 50px;
        width: 500px;
        height: 300px;
        background-color: rgb(241, 100, 6);
        float: left;
    }
</style>