在 css 上使用宽度和计算

Question

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

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

我需要一些要求。

我只需要使用填充，而不是边距。
在这种情况下，我无法向容器 C3 添加填充。
我想用calc下的逻辑来解决。不知道是不是先应用百分比，还是需要先给电脑定义padding，然后再算百分比...
我更喜欢使用 border-box 模型，因为它解决了我代码其他地方的很多问题...但也许我可以牺牲这个。

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

由于您使用的是 box-sizing: border-box，宽度已包含填充。 140px 被添加了两次。

width: 33.33% 就够了。

Answer 2

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>

在 css 上使用宽度和计算

Using width and calc on css

css

calc