如何让计算器calc-grid网格与history历史记录区域横向并排显示

第一步：调整HTML结构 #

将历史记录区域从calc-grid内部移出，外层新增公共父容器承载两个模块：

<!-- 新增外层父容器 -->
<div class="calc-container">
    <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>
    <!-- 历史记录移到calc-grid外部，和calc-grid平级 -->
    <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>

第二步：调整CSS样式 #

/* 新增外层容器样式，实现横向并排+整体居中 */
.calc-container{
    margin-top: 100px;
    display: flex;
    justify-content: center;
    gap: 20px; /* 计算器和历史记录的间距，可自行调整 */
}
/* 修复原代码中calc-grid选择器遗漏.的语法错误 */
.calc-grid{
    display: grid;
    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{
    width: 300px; /* 可自行调整宽度 */
    height: 600px; /* 和calc-grid总高度一致，6行*100px */
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 4px 4px 20px black;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 让操作按钮固定在区域底部 */
}
#history_txt{
    flex-grow: 1;
    overflow-y: auto; /* 历史内容过多时可滚动，不会撑开布局 */
    margin: 10px 0;
}
.histroy-btn{
    display: flex;
    width: 100%;
    gap: 10px;
}
.histroy-btn button{
    flex: 1; /* 两个按钮均分宽度 */
    padding: 8px 0;
    cursor: pointer;
}

关键修改说明 #

• 新增外层.calc-container容器，使用flex布局替代浮动实现横向并排，稳定性更高，不会出现高度塌陷等问题
• 修复原CSS中.calc-grid选择器遗漏.的语法错误
• 历史记录区域采用纵向flex布局，通过justify-content: space-between实现底部按钮固定
• 为历史文本区域添加滚动属性，兼容多记录场景

内容的提问来源于stack exchange，提问作者user16569672