如何使div（在另一個div內）水平和垂直對齊

Question

我有3個div，它們是水平對齊的（淺綠色）。 每個div內有兩個div（紅色和黑色div）。

我想做的是，與紅色div無關，將黑色div水平對齊。 黑色div的CSS是

.black-div {
  width: 100%;
  height: 45px;
  max-width: 235px;
  display: inline-block;
  color: #33244a;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  line-height: 43px;
  border: 2px dashed #d5d1d8;
  border-radius: 6px;
  box-sizing: border-box;
}

輸出將是這樣的

我一點也不擅長CSS。 我嘗試使用位置：固定/絕對，但沒有運氣。

Answer 1

試試吧。

使用div和min-height 。

 section{ display: inline-block; border: 1px solid red; width: 100px; } .textarea-wrap{ overflow: hidden; min-height: 200px; } .textarea-wrap > textarea{ width: 100%; resize: none; } .red{ background-color: red; } 

 <div> <section> <div class="textarea-wrap"> <textarea rows="3">12312312</textarea> </div> <div class="red"> red </div> </section> <section> <div class="textarea-wrap"> <textarea rows="10">12312312</textarea> </div> <div class="red"> red </div> </section> <section> <div class="textarea-wrap"> <textarea rows="6">12312312</textarea> </div> <div class="red"> red </div> </section> </div> 

Answer 2

您應該使用表格使其更易於管理，或者在黑色div上使用絕對定位，以便可以從藍色div的底部開始對其進行測量。

Answer 3

可能有沒有間隔的解決方案。 我在找它 ：）

找到沒有間隔的解決方案 justify-content: space-between;

 .wrapper { display: flex; flex-direction: row; /* flex in a row inside (make columns .col) */ } .col { display: flex; flex-direction: column; /* flex in a column inside */ justify-content: space-between; /* since the elements must not grow, fill the space between them */ flex: 1 1 100px; /* grow and shrink of col allowed to fill row evenly starting at 100px*/ margin: 5px; border: 3px solid black; background-color: aqua; } .red { flex: 0 1 auto; /* no vertical (col) growing (so it does not expand vertically) */ border: 3px solid black; border-radius: 10px; background-color: red; margin: 5px; padding: 10px; } .black { background-color: black; color: white; margin: 5px; padding: 10px; display: block; flex: 0 1 auto; /* no growing allowed */ } .resize { overflow: hidden; resize: vertical; } 

 <div class='wrapper'> <div class='col'> <div class='red'>Some wide wide wide wide wide wide Text</div> <div class='black'>Footer</div> </div> <div class='col'> <div class='red'>Some<br/>much<br/>longer<br/>Text</div> <div class='black'>Footer</div> </div> <div class='col'> <div class='red resize'>Some Text<br><b><u>Resize me!</u></b></div> <div class='black'>Footer</div> </div> </div> 

編輯已刪除的spacer div

Edit2添加了CSS注釋，以便於理解