Question

我正在尝试为简单的主页编写代码。

有sub1，sub2代表

 html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
                margin: 0;
                padding: 0;
                border: 0;
                width : 100%;
                height: 100%;
            }
        .main_wrap {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .sub1 {
            display: inline-block;
            float: left;
            width: 49%;
            height: 100%;
            background-color: #0a4e85;
            text-align: center;
            display: table;
            border: 5px solid white;
        }

        .sub2 {
            display: inline-block;
            float: left;
            width: 50%;
            height: 100%;
            background-color: white;
            text-align: center;
            display: table;
            border: 5px solid #0a4e85;

        }
        .main_title1, .main_title2{
            color : white;
            text-align: center;
            line-height: 1.55;
            white-space: nowrap;
            font-size: 70px;
            display: table-cell;
            vertical-align: middle;
            font-weight: 500;
            text-decoration: none;
        }

 <html>
    <head>
        <title>Main</title>
    </head>
    <body>
    <div class="main_wrap">
        <div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
        <div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
    </div>
    </body>
    </html>

菜单。每个div垂直划分窗口。

但是当我减小窗口宽度大小时，sub2的第二个div低于sub1。

我想保持sub1，sub2在行中。我该如何解决？

谢谢！

Answer 1

在正文标签中添加box-sizing: border-box;

 html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
                    margin: 0;
                    padding: 0;
                    border: 0;
                    width : 100%;
                    height: 100%;
                    box-sizing: border-box;
                }
            .main_wrap {
                position: relative;
                width: 100%;
                height: 100%;
            }
            .sub1 {
                display: inline-block;
                float: left;
                width: 50%;
                height: 100%;
                background-color: #0a4e85;
                text-align: center;
                display: table;
                border: 5px solid white;
            }
        
            .sub2 {
                display: inline-block;
                float: left;
                width: 50%;
                height: 100%;
                background-color: white;
                text-align: center;
                display: table;
                border: 5px solid #0a4e85;
        
            }
            .main_title1, .main_title2{
                color : white;
                text-align: center;
                line-height: 1.55;
                white-space: nowrap;
                font-size: 70px;
                display: table-cell;
                vertical-align: middle;
                font-weight: 500;
                text-decoration: none;
            }

    <html>
        <head>
            <title>Main</title>
        </head>
        <body>
        <div class="main_wrap">
            <div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
            <div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
        </div>
        </body>
        </html>

Answer 2

 html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
                margin: 0;
                padding: 0;
                border: 0;
                width : 100%;
                height: 100%;
            }
        .main_wrap {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
        }
        .sub1 {
            display: inline-block;
            float: left;
            width: 49%;
            height: 100%;
            background-color: #0a4e85;
            text-align: center;
            display: table;
            border: 5px solid white;
        }

        .sub2 {
            display: inline-block;
            float: left;
            width: 50%;
            height: 100%;
            background-color: white;
            text-align: center;
            display: table;
            border: 5px solid #0a4e85;

        }
        .main_title1, .main_title2{
            color : white;
            text-align: center;
            line-height: 1.55;
            white-space: nowrap;
            font-size: 70px;
            display: table-cell;
            vertical-align: middle;
            font-weight: 500;
            text-decoration: none;
        }

 <html>
    <head>
        <title>Main</title>
    </head>
    <body>
    <div class="main_wrap">
        <div class="sub1"><div class="main_title1"><a href="javascript:goPageList();" >A</a></div></div>
        <div class="sub2"><div class="main_title2"><a href="javascript:goPageMonth();" style="color: #0a4e85" >B</div></div>
    </div>
    </body>
    </html>

您刚刚添加了显示：flex;在main_wrap类中。

我如何使我的代码响应以调整页面大小

2 个答案: