我正在尝试创建一个网页，其中两个部分彼此相邻。每个占用屏幕宽度的50％。但是，一旦我向div中添加了填充，它们就会变得太宽并向下推第二个div。
我找到了使用CSS calc减去填充的解决方案。这行得通，但这是乏味的工作。有更好的方法吗？
我的代码如下：
<body>
<div style="width: calc(50% - 40px); float: left; background-color: green; padding: 20px;">
<h1>This is div 1</h1>
<p>
Paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse maiores est laboriosam vitae, et nisi reiciendis ab eligendi nobis quia?
</p>
</div>
<div style="width: calc(50% - 40px); float: left; background-color: blue; padding: 20px;">
<h1>This is div 2</h1>
<p>
Paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse maiores est laboriosam vitae, et nisi
reiciendis ab eligendi nobis quia?
</p>
</div>