边距/宽度之间的空间推动其他元素/ div答案

【问题标题】：Space Between margin/width pushing other element/div边距/宽度之间的空间推动其他元素/ div
【发布时间】：2022-01-24 20:58:13
【问题描述】：

堆栈溢出。所以在过去的几个小时里，我一直坐在这里试图弄清楚这件事并扯掉我的头发。所以我来这里问一个问题，希望能得到答案。

我的问题是我正在尝试对齐 3 个 div，其中的文本位于同一行，但也能够具有一定的宽度和/或 margin-left 或 margin-right 而无需推动其他 div .

我目前为对齐所有 3 个 div 所做的是拥有一个带有 display flex 的父容器，然后为每个文本设置子容器。

代码如下：

HTML

<div class="transactionSecondInnerWrapper">
<div class="transactionMiddleLeft">Text</div>
<div class="transactionMiddleMiddle">Text</div>
<div class="transactionMiddleRight">Text</div>
</div>

CSS

.transactionSecondInnerWrapper {
 display: flex;
 justify-content: space-between
}
.transactionMiddleLeft {
 margin-left: 10px /*This is what pushes my middle element/div but not the right one*/
}
.transactionMiddleRight {
  margin-right: 10px /*This also pushes when margin becomes bigger*/
}

我还意识到，每当我更新我的文本或以任何方式使其更长（例如左侧的文本）时，都会同时推动中间的 div。

感谢阅读。

亲切的问候。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

请在您的子 div 中使用这些属性。而不是边距，请使用填充。希望您的问题能得到解决。

.transactionMiddleLeft{
   flex: 33.33%;
   max-width: 33.33%;
   padding-left: 10px;
 }


.transactionMiddleMiddle{
       flex: 33.33%;
       max-width: 33.33%;
       padding-left: 10px;
     }



.transactionMiddleRight{
       flex: 33.33%;
       max-width: 33.33%;
       padding-left: 10px;
     }

【讨论】：

【解决方案2】：

试试这个：

*{
box-sizing: border-box;
}
.transactionSecondInnerWrapper {
 display: flex;
}
.transactionMiddleLeft {
 padding-left: 2%;
 text-align: left;
}
.transactionMiddleRight {
  padding-right: 2%;
  text-align: right;
}
.transactionMiddleMiddle{
  text-align: center;
}
.transactionMiddleRight,.transactionMiddleLeft,.transactionMiddleMiddle{
 width: 33.33%;
 word-wrap: break-word;
  border: solid red 1px;
}

<div class="transactionSecondInnerWrapper">
<div class="transactionMiddleLeft">TextTextTextTextTextTextTextTextTextText</div>
<div class="transactionMiddleMiddle">Text</div>
<div class="transactionMiddleRight">Text</div>
</div>

【讨论】：