Question

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

例如，在这3列布局中，中心列的结果宽度与其他两列略有不同，但我无法弄清楚如何使文本的宽度相同。

我需要一些要求。

我只需要使用填充，而不是边距。
在这种情况下，我无法向容器C3添加填充。
我想用calc下的逻辑来解决它。我不知道是否首先应用百分比，或者我需要先在计算机上定义填充，然后再解决百分比......
我更喜欢使用边框模型，因为它在我的代码的其他地方解决了很多问题...但我可能会牺牲这个问题。

＆＃13;

hf2 = plt.figure()
ha2 = hf2.add_subplot(111,projection='3d')
ha2.plot([1,2,3],[4,5,6],[7,8,9])
ha2.text = lambda x,y,s,self=ha2,**kwargs : plt.Axes.text(self,x,y,s,kwargs)
butt2 = widgets.Button(ha2,'button 2')     # <-- no error

＆＃13;

SELECT O.OrderID, O.OrderDate, C.City, C.Country, C.PostalCode, C.ContactName, O.CustomerID, O.ShipperID, D.ProductID, COUNT(D.ProductID) ProductCount, S.SupplierID
FROM Customers C

INNER JOIN Orders O 
        ON O.CustomerID = C.CustomerID
INNER JOIN OrderDetails D 
        ON O.OrderID = D.OrderID
INNER JOIN Products P
        ON D.ProductID = P.ProductID
INNER JOIN Suppliers S
        ON S.SupplierID = P.SupplierID 

WHERE 1 = 1
GROUP BY O.OrderID
ORDER BY OrderDate DESC

＆＃13;

有什么想法吗？

Answer 1

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

width: 33.33%就是所需要的。

Answer 2

<4> 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上使用宽度和计算

2 个答案: