问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一道简单CSS的面试题

头像
曦照
    1926

    今天刚刚碰到的 hr要求一个半小时完成

    要求DIV自适应大小

    边距都是30px，剩下的DIV全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好

    要求已经写在图上了 有没有萌新前来练手

    图片描述

    csshtmlhtml5
    阅读 4.2k
    7 个回答
    得票最新
    头像
    莲_涳栢__
      6871820
      ✓ 已被采纳
      <style type="text/css">
<!--
            html,body {
                height: 100%;
            }
            body,
            body * {
                margin: 0;
                padding: 0;
            }
            div {
                box-sizing: border-box;
                -webkit-box-sizing: border-box;
                border: 1px solid #333;
            }
            .header_left,
            .header_right {
                height: 40%;
                float: left;
                margin-top: 10%;
            }
            .header_left {
                width: 40%;
            }
            .header_right {
                width: 60%;
                border-left-style: none; 
            }
            .clear {
                clear: both;
                border: none;
            }
            .main {
                margin-top: 5%;
                height: 45%;
                color: red;
                text-align: center;
            }
            .main_left,
            .main_right {
                float: left;
                width: 60%;
                height: 100%;
                border: none;
            }
            .main_right {
                width: 40%;
                border-left: 1px solid #333;
            }
        .main_left_top,
        .main_left_middle,
        .main_left_bottom,
        .main_right_top,
        .main_right_bottom {
         margin: 30px;
        }
-->
        </style>
    <div class="header_left"></div><div class="header_right"></div><div class="clear"></div>
    <div class="main"><div class="main_left">
        <div class="main_left_top">随着内容适应大小</div>
        <div class="main_left_top">随着内容适应大小</div>
        <div class="main_left_bottom">随着内容适应大小</div>
    </div><div class="main_right">
        <div class="main_right_top">随着内容适应大小</div>
        <div class="main_right_bottom">随着内容适应大小</div>
        </div>
        <div class="clear"></div>
    </div>
      头像
      山海
        86084266

        有2种方法实现一种是float，一种是flex，不过可能flex的兼容性不太好
        float布局

        flex布局

        头像
        dashixionglihai
          43642943

          这个问题不难啊，我会，分分钟搞定

          头像
          1351523628
            591927

            图已经写得很详细了，只要根据图写出相应的布局就OK了。如果还是迷茫的，建议你从巩固一下DIV布局。

            头像
            UxieKong
              7091523
              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
    html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #top_blank {
        height: 10%;
        width: 100%;
    }

    #top_wrapper {
        margin: -1px 0 -1px 0;
        display: -webkit-flex;
        display: flex;
        height: 40%;
        width: 100%-2px;
        border: 1px solid black;
    }

    #top_left {
        width: 40%;
        height: 100%;
        border-right: 1px solid black;
    }

    #top_right {
        width: 60%;
        height: 100%;
    }

    #middle_blank {
        height: 5%;
        width: 100%;
    }

    #bottom_wrapper {
        margin: -1px 0 -1px 0;
        display: flex;
        display: -webkit-flex;
        height: 45%;
        width: 100%-3px;
        border: 1px solid black;
    }

    #bottom_left {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        border-right: 1px solid black;
    }

    #bottom_right {
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    .content {
        margin:30px 30px 0 30px;
        border:1px solid black;
    }
    
    .content2 {
        margin:30px 30px 30px 30px;
        border:1px solid black;
    }
</style>
<body>
    <div id="top_blank"></div>
    <div id="top_wrapper">
        <div id="top_left"></div>
        <div id="top_right"></div>
    </div>
    <div id="middle_blank"></div>
    <div id="bottom_wrapper">
        <div id="bottom_left">
            <div class="content">自适应大小</div>
            <div class="content">自适应大小</div>
            <div class="content2">自适应大小</div>
        </div>
        <div id="bottom_right">
            <div class="content">自适应大小</div>
            <div class="content2">自适应大小</div>
        </div>
    </div>
</body>
</html>
              头像
              leslie
                24963362

                虽然是两年多前的问题，为了让后来者清楚，还是写下答案吧。被采纳的回答确实有一些问题，margin的取值是基于父元素的width的，也就是说margin-top:10%其实是取的宽度的10%，而不是高度，我目前的方法是margin-top:10vh;至于能不能让margin的取值基于父元素的height，我目前也不知道，如果有知道的看到可以赐教

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题