當(dāng)調(diào)整窗口大小時(shí)，我怎樣才能使左邊和右邊的div保持一致，具有相同的縱橫比并且并排？(無(wú)論我如何調(diào)整窗口大小，它們都保持不變)。

像這樣:

以下是我的代碼:

body {
    background: #222222;
}

#wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;

    @media screen and (max-width: 1080px) {
        height: auto;
    }

}

.input_style {
    position: relative;
    display: block;
    width: 100%;
    height: 9.64vh;
    margin-bottom: 3.91vh;
    background-color: #222222;
    background-image: none;
    border-bottom: .13vh #fafafa solid;
    font-size: 4.17vh;
    font-weight: normal;
    line-height: 9.64vh;
    letter-spacing: -.13vh;
    color: #fafafa;

    @media screen and (max-width: 1675px) {
        height: 7.81vh;
        line-height: 7.81vh;
        font-size: 3.13vh;
    }

}

.cont {
    display: flex;
    width: 100%;
    height: 100vh;
    margin: 50% auto;
    aspect-ratio: 1/1.4;
    box-sizing: border-box;

}

.cont section {
    display: inline-block;
    float: left;
    height: 100vh;
}

.cont .left {
    position: relative;
    width: calc(50% - 6.72vh);
    padding: 5.21vh;
    background-color: #ffffff;
}

.cont .right {
    position: relative;
    width: calc(50% + 6.72vh);
    padding: 5.21vh;
    box-shadow: -1.52vh 0 3.8vh -.95vh rgba(0, 0, 0, .4);
}

.index .cont .left .inner {
    display: flex;
    flex-direction: column;
    width: auto;
    height: calc(100vh - 15.11vh);
    justify-content: center;
    align-items: center;
}

.index .cont .left .tbl_row {
    display: table-row;
}

.index .cont .left .day {
    display: table-cell;
    height: 4.17vh;
    font-size: 2.86vh;
    color: #767676;
    text-align: center;

    @media screen and (max-width: 1675px) {
        font-size: 2.36vh;
    }
    
    @media screen and (max-width: 1580px) {
        font-size: 1.86vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 1.36vh;
    }
}

.index .cont .left .name {
    display: table-cell;
    padding-top: 5.21vh;
    font-size: 5.73vh;
    font-weight: 300;
    font-weight: 500;
    text-align: center;
    word-break: keep-all;

    @media screen and (max-width: 1675px) {
        font-size: 4.73vh;
    }

    @media screen and (max-width: 1580px) {
        font-size: 3.73vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 2.73vh;
    }

}

.index .cont .left .shop_logo {
    display: table-cell;
    padding-top: 7.16vh;
    padding-bottom: 9.11vh;
    
    @media screen and (max-width: 1675px) {
        padding-top: 5.16vh;
        padding-bottom: 7.11vh;
    }

    @media screen and (max-width: 1580px) {
        padding-top: 3.16vh;
        padding-bottom: 5.11vh;
    }

    @media screen and (max-width: 1080px) {
        padding-top: 1.16vh;
        padding-bottom: 3.11vh;
    }
        

}

.index .cont .left .shop_logo .logo {
    width: 32.3vh;
    height: 23.69vh;
    margin: 0 auto;
    line-height: 23.69vh;
    text-align: center;
}

.index .cont .left .shop_logo .logo img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;

    @media screen and (max-width: 1675px) {
        max-width: 80%;
        max-height: 80%;

    }

    @media screen and (max-width: 1580px) {
        max-width: 60%;
        max-height: 60%;
    }

    @media screen and (max-width: 1080px) {
        max-width: 40%;
        max-height: 40%;
    }

}



.index .cont .left .powered_area {
    position: relative;
}

.index .cont .left .powered {
    height: 4.64vh;
    font-size: 2.34vh;
    color: #666666;
    text-align: center;

    @media screen and (max-width: 1675px) {
        font-size: 1.84vh;
    }
    
    @media screen and (max-width: 1580px) {
        font-size: 1.54vh;
    }

    @media screen and (max-width: 1080px) {
        font-size: 1.34vh;
    }
}

.index .cont .left .powered img {
    width: 17.58vh;
    margin-left: 1.95vh;
    vertical-align: middle;

    @media screen and (max-width: 1675px) {
        width: 13.58vh;
        margin-left: 1.95vh;
    }
    
    @media screen and (max-width: 1580px) {
        width: 9.58vh;
        margin-left: 1.95vh;
    }

    @media screen and (max-width: 1080px) {
        width: 7.58vh;
        margin-left: 1.95vh;
    }
}

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1vh;
    width: 50.5vh;
    padding-top: 6.51vh;
    margin: 0 auto;
    text-align: center;
  }
  
  .keypad li {
    display: inline-block;
    margin-right: 3.28vh;
    margin-bottom: 3.65vh;
  }
  
  .keypad li:nth-child(3n) {
    margin-right: 0;
  }
  
  .keypad li:nth-last-child(1),
  .keypad li:nth-last-child(2),
  .keypad li:nth-last-child(3) {
    margin-bottom: 0;
  }
  
  .keypad li .num {
    display: inline-block;
    width: 13.8vh;
    height: 13.8vh;
    border: .16vh #fafafa solid;
    border-radius: 50%;
    font-size: 6.25vh;
    line-height: 13.8vh;
    color: #fafafa;
    text-align: center;
    vertical-align: middle;
  }
  
  @media screen and (max-width: 1675px) {
    .keypad {
      display: block;
      width: 100%;
      text-align: center;
    }
  
    .keypad li {
      display: inline-block;
      margin: 0 1vh 1vh 0;
    }
  
    .keypad li:last-child {
      margin-right: 0;
    }
  
    .keypad li .num {
      width: 10.8vh;
      height: 10.8vh;
      border: .16vh #fafafa solid;
      border-radius: 50%;
      font-size: 4.25vh;
      line-height: 10.8vh;
      color: #fafafa;
      text-align: center;
      vertical-align: middle;
    }
  }
  
  .keypad li:active .num {
    background-color: #333333;
  }
  
  .keypad li .btn_back {
    position: relative;
  }
  
  .keypad li .btn_back::before {
    content: "";
    position: relative;
    display: block;
    width: 13.8vh;
    height: 13.8vh;
    background: url(../img/ico_keypad.png) no-repeat center;
    background-size: 5.47vh 4.56vh;
    
  }

@media screen and (max-width: 1675px) {
    .keypad li .btn_back::before {
        display: inline-block;
        width: 4vh;
        height: 3vh;
        background: url(../img/ico_keypad.png) round 0 0;
    }
}

.keypad li .btn_ok {
    background-color: #00c1de;
    border-bottom-color: transparent;
    border-width: 0;
    box-shadow: 0 3.8vh 5.7vh -1.9vh rgba(0, 0, 0, .2);
    color: #222222;
}

.keypad li .btn_ok:active {
    background-color: #129bb3;
}

<body>
    <div id="wrap" class="index" style="display:block">
        <div class="cont">
            <section class="left">
                <div class="inner">
                    <div class="tbl_row">
                        <p class="day">2019. 6. 10. MON</p>
                    </div>
                    <div class="tbl_row">
                        <h1 class="name">?????</h1>
                    </div>
                    <div class="tbl_row">
                        <div class="shop_logo">
                            <div class="logo">
                                <img src="../img/sample_logo.png" alt=""><!-- ????? -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="powered_area">
                    <p class="powered">Powered By <img src="../img/logo02.png" alt="FIT TO BE"></p>
                </div>
            </section>
            <!-- ??? -->
            <section class="right">
                <div class="inner">
                    <div class="pw"><!-- input ?? 4?? ?? ? class="open" ?? -->
                        <input type="number" class="input_style" style="font-size: 3.14vh;"
                            placeholder="???? ?? ??? 4??">
                    </div>
                    <ul class="keypad clearfix">
                        <li onClick=""><span class="num">1</span></li>
                        <li onClick=""><span class="num">2</span></li>
                        <li onClick=""><span class="num">3</span></li>
                        <li onClick=""><span class="num">4</span></li>
                        <li onClick=""><span class="num">5</span></li>
                        <li onClick=""><span class="num">6</span></li>
                        <li onClick=""><span class="num">7</span></li>
                        <li onClick=""><span class="num">8</span></li>
                        <li onClick=""><span class="num">9</span></li>
                        <li onClick="">
                            <div class="num btn_back"><span class="blind">back</span></div>
                        </li>
                        <li onClick=""><span class="num">0</span></li>
                        <li onClick=""><span class="num btn_ok">OK</span></li>
                    </ul>
                </div>
            </section>
            <!-- //??? -->
        </div>
    </div>
</body>

您可以使用& quot最大寬度和& quot最小寬度屬性。這樣你的div就不會(huì)超出指定的寬度范圍。另一個(gè)好主意是設(shè)置最小和最大寬度，并使它們成為單個(gè)div中的flex對(duì)象。并設(shè)置flex:1。