垂直對齊元素在不同高度的列

-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

垂直對齊元素在不同高度的列

回答

相關問題