如何在不影响移动端响应性的情况下定位header内的div？

我是HTML和CSS新手，现有以下问题：

• 有一个占满宽度的header，内部包含两个带内容的inline-block类型div，需要调整它们的位置（有示例图展示当前与目标效果）。
• 适配移动端（测试尺寸320x586及以上）时，用margin、padding调整或尝试各类position属性都会导致div被裁剪或溢出header；仅保留inline-block默认设置时移动端显示正常，但无法满足位置需求。
• 还未学习flex，曾尝试overflow属性但仅对垂直方向有效。经建议尝试flex+space-around后，PC端显示正常，但移动端仍出现裁剪问题。

以下是演示用的HTML/CSS代码：

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posicionamento do elemento div</title> 
    <style>
        * {
            margin: 0px;
        }
        nav {
            margin: 10px;
            padding: 30px;
            border: 1px solid black;;
        }
        header {
            min-height: 550px;
            background-image: linear-gradient(to right, rgba(128, 128, 128, 0.582), transparent);
        }
        #um {
            display: inline-block;
            margin: 10px;
            border: 10px solid black;
            width: 500px;
            height: 300px;
            background-color: aqua;
            border: 1px solid black;
        }
        #dois {
            display: inline-block;
            margin: 10px;
            border: 1px solid black;
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">Início</a>
        <a href="#">Sobre mim</a>
        <a href="#">Habilidades</a>
        <a href="#">Contato</a>
    </nav>
    <header>
        <div id="um"></div>
        <div id="dois"></div>
    </header>
</body>
</html>

核心问题分析 #

问题根源在于给两个div设置了固定宽度（500px/400px），移动端屏幕宽度远小于这个值，不管用inline-block还是flex，都会因为宽度超出容器而溢出裁剪。必须先解决宽度自适应问题，再调整位置。

方案1：基于inline-block的适配调整（无需flex） #

如果不想用flex，可以给div设置百分比宽度，同时用box-sizing: border-box让margin、border算入宽度内，避免溢出：

* {
    margin: 0;
    box-sizing: border-box; /* 关键：让padding、border计入元素总宽度 */
}
header {
    min-height: 550px;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.582), transparent);
    padding: 10px; /* 给内部div留空间，避免贴边 */
}
#um {
    display: inline-block;
    margin: 10px;
    border: 1px solid black;
    width: calc(50% - 22px); /* 50%宽度减去margin(10*2)和border(1*2) */
    height: 300px;
    background-color: aqua;
    vertical-align: middle; /* 让两个div垂直居中对齐 */
}
#dois {
    display: inline-block;
    margin: 10px;
    border: 1px solid black;
    width: calc(45% - 22px); /* 按比例设置宽度，减去边距和边框 */
    height: 400px;
    background-color: aqua;
    vertical-align: middle;
}
/* 移动端适配：屏幕宽度小于992px时，让两个div上下排列 */
@media (max-width: 992px) {
    #um, #dois {
        width: calc(100% - 22px); /* 占满容器宽度，减去边距边框 */
        display: block; /* 块级元素自动换行 */
    }
}

方案2：优化flex实现（解决移动端裁剪） #

如果用flex，同样要解决宽度自适应问题，同时给header添加内边距，避免内容贴边：

* {
    margin: 0;
    box-sizing: border-box;
}
header {
    min-height: 550px;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.582), transparent);
    display: flex;
    align-items: center; /* 垂直方向居中 */
    justify-content: space-around; /* 水平方向分散对齐 */
    padding: 10px;
    flex-wrap: wrap; /* 关键：移动端自动换行 */
    gap: 10px; /* 替代margin，更方便控制间距 */
}
#um {
    border: 1px solid black;
    width: clamp(300px, 50%, 500px); /* 最小300px，最大500px，自适应中间宽度 */
    height: 300px;
    background-color: aqua;
}
#dois {
    border: 1px solid black;
    width: clamp(280px, 45%, 400px);
    height: 400px;
    background-color: aqua;
}

关键知识点说明 #

• box-sizing: border-box：强制元素的padding、border计入总宽度，避免因为边距导致宽度超出容器。
• clamp()：设置宽度的范围，适配不同屏幕尺寸，比固定px更灵活。
• flex-wrap: wrap：flex容器内元素超出宽度时自动换行，解决移动端溢出问题。
• 媒体查询@media：针对不同屏幕尺寸设置不同样式，确保移动端布局合理。

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