在 CSS 上使用宽度和计算

Question

我正在 css 上尝试使用 calc 来定义一些外部空间（如外部边距）

例如，在这 3 列布局中，中间列的宽度与其他两个有点不同，但我不知道如何使文本具有相同的宽度。

我需要一些要求。

• 我只需要使用内边距，而不是边距。

• 在这种情况下，我无法为容器 C3 添加填充。

• 我想使用 calc 下的逻辑来解决它。不知道是先应用百分比，还是需要先给电脑定义paddings，然后再求解百分比...

• 我更喜欢使用边框模型，因为它在我的代码的其他地方解决了很多问题......但也许我可以牺牲这个。

body {
  margin: 0;
  padding 0;
}
* {
  box-sizing: border-box;
}
p {
  text-align: justify;
}
.C3 {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.C3>div {
  width: 33.33%;
  padding: 50px;
}
.C3>div:first-child {
  background-color: #DFD;
  width: calc(33.33% + 140px);
  padding-left: 140px;
}
.C3>div:last-child {
  background-color: #FEE;
  width: calc(33.33% + 140px);
  padding-right: 140px;
}

<section class="C3">
  <div>
    <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
  </div>

  <div>
    <p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
  </div>

  <div>
    <p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
  </div>
</section>

有什么想法吗？

Answer 1

4castle 的回答让我意识到是的，我在重复一些东西，但我发现那是 50px。

所以在我的边距中，我需要从计算中减去 50px，现在我有 90px。

差异很微妙，但现在我的列文本大小完全相同。

body {margin: 0; padding 0;}

*{box-sizing: border-box;}

p {
	text-align: justify;}

.C3 {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;}

.C3>div {
	width: 33.33%;
	padding: 50px;}

.C3>div:first-child {
	background-color: #DFD;
	width: calc(33.33% + 90px);
	padding-left: 140px;}
	
.C3>div:last-child {
	background-color: #FEE; 
	width: calc(33.33% + 90px);
	padding-right: 140px;}

<section class="C3">
<div>
	<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>

<div>
	<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>

<div>
	<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>

Answer 2

由于您使用的是box-sizing: border-box，因此宽度已经包含了内边距。 140px 被添加了两次。

width: 33.33% 就足够了。