div里三个div排列对齐问题。

Posted 2023-04-30

第一行第二行都是三个div，想要的效果是一个居左，一个居中，一个居右。
第三行里面两个div，让两个div水平垂直居中显示。
设置float属性 text-align就不起作用，margin：0 auto，也不起作用。
设置text-align或者margin：0 auto的话就不在一行显示。

参考技术A 可以使用绝对定位position-absolute; left : 200px; right : 30px; 数值自己调适试试，追问

目的就是为了自适应 这样的话会导致位置定位不准

追答

你可以给上面的字加个灰色边框，设置个合适的宽跟高，然后padding-right：30px;试试。
第三个也是一样设置padding-left：100px;具体数值自己调着试试

将 div 元素与容器底部对齐 [重复]

【中文标题】将 div 元素与容器底部对齐 [重复]

【英文标题】：Align div element to bottom of container [duplicate]

【发布时间】：2017-01-30 05:26:18

【问题描述】：

我正在尝试将容器内的三个 div 之一进行底部对齐，但我遇到了一些问题。

如您所见，如果我尝试在 bottom-aligned div 上使用绝对定位，高度就会成为问题。

我可以设置一个特定的高度，但是cta-item div 中的内容可以从非常小到非常大。

我正在尝试为所有用例创建解决方案。

我知道我可以使用 jQuery 来获得最大的 cta-item div 的高度并进行相应的调整，但我会尽可能避免使用 jQuery/JS。

我用我目前拥有的东西创建了一个小提琴here。

提前谢谢你！

.dynamic-cta-ctr 
  display: flex;

.dynamic-cta-ctr .cta-item 
  flex: 1;
  text-align: center;
  padding: 0 30px;
  position: relative;
  border-right: 1px solid #555;

.dynamic-cta-ctr .cta-item:last-child 
  border-right: none;

.dynamic-cta-ctr .cta-item .bottom-aligned 
  /* position: absolute;
  bottom: 0; */

<div class="dynamic-cta-ctr">
  <div class="cta-item">
    <div class="heading-text"><h3>Some content</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
  <div class="cta-item">
    <div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
    <div class="cta-field-content">Some content that sort of hangs around</div>
    <div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
  </div>
</div>

【参考方案1】：

将此添加到您的代码中：

.cta-item 
   display: flex;
   flex-direction: column;


.bottom-aligned 
    margin-top: auto;

revised fiddle

更多详情：Methods for Aligning Flex Items

【讨论】：

感觉像 2017 年。出色的解决方案。