css - 两个固定宽度的div需要在父div中等距

Question

我在另一个父 div 中有两个 div(宽度固定为 150px)，其宽度根据浏览器宽度而变化。

我想将两个子 div 放置在父 div 中，因此两个 div 之间的边距等于父 div 和子 div 边缘之间的边距。

红色箭头始终具有相同长度的示例:

Answer 1

编辑:您可以按照我最初的建议进行操作，但现在添加

#leftwrapper, #rightwrapper { text-align: center; }
#childdiv1, #childdiv2 { display: inline-block; }

inline-block，而不是 block，你不需要 margin 然后为子 div...

如果那行不通，那可能行不通，如果不使用表格，可能很难得到你想要发生的事情

你必须创建两个新的 div 包装器

所以你有

#parentdiv { display: block; width: 100%; }
#leftwrapper { display: inline-block; width: 50%; }
#rightwrapper { display: inline-block; width: 50%; }
#childdiv1 { display: block; margin: 0 auto; }
#childdiv2 { display: block; margin: 0 auto; }

html 会像

<div id="parentdiv">
    <div id="leftwrapper">
        <div id="childdiv1">your stuff</div>
    </div>
    <div id="rightwrapper">
        <div id="childdiv2">your stuff</div>
    </div>
</div>