html - 如何使网格彼此相邻浮动

Question

我怎样才能让我的计算器“计算网格”浮动在“历史”的左侧。目前它们在彼此下方，我所做的任何调整只会影响我的计算网格。我需要它们彼此并排，“#save”“#clr”都位于“历史”的底部。我试图从计算网格中取出历史，但它没有正确浮动。

 <div class="calc-grid">
    <div id="result">
        <i onClick="style()"id='style' class="fas fa-history"></i>
        <div id="prev"></div>
        <div id="current"></div>
    </div>
    <button class='span' onClick="calculate(this)">AC</button>
    <button onClick="calculate(this)">DEL</button>
    <button onClick="calculate(this)">÷</button>
    <button onClick="calculate(this)">1</button>
    <button onClick="calculate(this)">2</button>
    <button onClick="calculate(this)">3</button>
    <button onClick="calculate(this)">*</button>
    <button onClick="calculate(this)">4</button>
    <button onClick="calculate(this)">5</button>
    <button onClick="calculate(this)">6</button>
    <button onClick="calculate(this)">+</button>
    <button onClick="calculate(this)">7</button>
    <button onClick="calculate(this)">8</button>
    <button onClick="calculate(this)">9</button>
    <button onClick="calculate(this)">-</button>
    <button onClick="calculate(this)">.</button>
    <button onClick="calculate(this)">0</button>
    <button class='span' onClick="calculate(this)">=</button>
    <div class="history">
        <h3>History:</h3>
        <span id="history_txt">
        </span>
        <div class="histroy-btn">
            <button id='save'>Save</button>
            <button id='clr'>Clear History</button>
        </div>
    </div>
</div>    

calc-grid{
    margin: auto;
    margin-top: 100px;
    display: grid;
    justify-content: center;
    width: min-content;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(6, 100px);
    box-shadow: 4px 4px 20px black;
}
.calc-grid button{
    font-size: 21px;
    border: 1px solid black;
    background-color: rgb(42, 77, 172);
    color: white;
    cursor: pointer;
}
.calc-grid button:hover{
    background-color: rgba(42, 77, 172, 0.815);
}
.span{
    grid-column: span 2;
}
#result{
    color: white;
    grid-column: 1 / -1;
    background-color: rgb(0 ,0, 0, .75 );
    display:flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px;
    font-size: 25px;
}
#prev{
    color: lightgray;
    font-size: 22px;
}
#result i{
    color: antiquewhite;
    font-size: 15px;
}
#result i:hover{
    cursor: pointer;
}
.history{
    float: right;
}
.histroy-btn{
    display: inline-flex;
    width: 100%;
}

标签： htmlcss