垂直对齐元素在不同高度的列

-2

I've attached an illustration to help me get my point across!垂直对齐元素在不同高度的列

所以，DIV 1和DIV 2（父DIV的孩子）是一个网页，我建立在列，以及其中的内容的不相同的高度，所以目前他们的按钮不垂直排列。

我需要垂直对齐BUTTON 1和BUTTON 2（我想到了PARENT DIV的底部？

我该怎么办？

谢谢！

来源

2016-04-26 SRD

嗨SRD，欢迎SO！这听起来像你将不得不玩“位置”和“底部”属性。在你做之前，我会建议在jsfiddle.net上重新创建你的问题并在这里发布链接。这将有助于回答过程。 – Frits

你首先要做的就是让柱子高度相同......然后从那里开始。 –

使用CSS flex属性 –

您可以在DIV 1和DIV 2中应用位置相对和底部填充，以防止其内容与位置应该绝对的按钮重叠（可能根据屏幕截图为底部：10px）。

例子：jsfiddle.net/yy87qdmt/1/

来源

2016-04-26 14:44:56

太棒了，谢谢 - 但有没有办法做到没有固定的高度？该网站的响应如此固定的高度是一个令人讨厌的... – SRD

尝试应用相对位置的父div，静态的儿童divs和拆分按钮的水平位置取决于子div。随着儿童div中的文字变大，按钮将遵循更大的按钮，因为儿童div推动父div高度 –

我不认为你可以从位置CSS指令了，但如果你不想使用底部，有许多jQuery的例子是将允许你逻辑地放置你的div。

或者（我知道你似乎想使用Divs），但是你也许可以更容易地使用表格。

来源

2016-04-26 14:46:17

他只用CSS标记 –

啊，谢谢。但提供他可能没有想到的建议仍然不是一个坏主意。但你是对的。 –

我当然对其他方法开放，但需要一点指针！只要我可以保留DIV 1和DIV 2作为响应列，我很好！ – SRD

测试&校对在firefox-45和铬50

<body> 
    <main> 
     <style scoped> 
      main 
      { 
       flex-direction: row; 
       display: flex; 
      } 
      main > figure 
      { 
       border: 1px darkgrey solid; 
       justify-content: flex-end; 
       flex-direction: column; 
       box-sizing: border-box; 
       display: flex; 
      } 
      main > figure > :first-child 
      { 
       background-color: lightgrey; 
       flex-grow: 1; 
      } 
      main > figure > figcaption 
      { 
       background-color: black; 
       color: lightgrey; 
       flex-shrink: 1; 
      } 
     </style> 
     <figure> 
      <picture> 
       <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> 
       <img src="mdn-logo-narrow.png" alt="MDN"> 
      </picture> 
      <figcaption> 
       Caption 0 
      </figcaption> 
     </figure> 
     <figure> 
      <article> 
       <p>Lorem ipsum dolor sit amet cosectetur...</p> 
       <p>...Lorem ipsum dolor sit amet cosectetur...</p> 
       <p>...Lorem ipsum dolor sit amet cosectetur</p> 
      </article> 
      <figcaption> 
       Caption 1 
      </figcaption> 
     </figure> 
    </main> 
</body>

来源

2016-04-26 15:12:10

Flexbox，就可以做到这一点。

.row { 
 
    display: flex; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
.col { 
 
    width: 50%; 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
    padding: 1em; 
 
} 
 
img { 
 
    width: auto; 
 
    max-height: 100%; 
 
} 
 
p { 
 
    text-align: justify; 
 
} 
 
/* the magic */ 
 

 
.col { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
button { 
 
    margin-top: auto; 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <h2>My Heading</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p> 
 
    <button>My button</button> 
 
    </div> 
 
    <div class="col"> 
 
    <h2>My Heading</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam 
 
     repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p> 
 
    <button>My button</button> 
 
    </div> 
 
</div>

来源

2016-04-26 15:44:21

这很出色，非常感谢你！ – SRD

垂直对齐元素在不同高度的列

回答

相关问题