將元素與父級和中心的底部對齊

Question

我創建了一個響應式網頁，並使用樣式化的ul選擇器提供了多窗格視圖。

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

我現在不會發布整個樣式，以免使文章混亂。 讓我知道是否應該這樣做。 現在看起來像這樣：

唯一的問題是按鈕的位置-我希望它們處於同一高度。 所以我將選擇器添加到我的樣式中

#about {
    position: relative; 
}

 #about .button {
      position: absolute;
      bottom: 0; 
 }

不幸的是，現在按鈕沒有居中（按鈕的左邊框在窗格的中心）。 當然，如果窗格顯示為一個接一個地顯示，則所有按鈕都顯示在同一位置。

另一方面，如果將#about選擇器更改為#about ul或#about li ，則ul塊縮小並且按鈕對齊得太高。

我想要的是：所有按鈕都應該排成一排，並且按鈕最靠近底部。 在這種情況下：將第二個和第三個按鈕的高度與第一個按鈕對齊（但是我不想硬編碼第一個窗格是最長的）

我該如何實現？

Answer 1

您可以像下面那樣使用flexbox。 它支持IE10以上版本。

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .threepane { display: -webkit-flex; display: -ms-flexbox; display: flex; } .threepane li { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: yellow; position: relative; } .threepane li p { margin-bottom: 30px; } .threepane li a { position: absolute; bottom: 5px; } 

 <ul class="threepane"> <li> <h3>Section 1</h3> <p>Foo <br /> bar <br /> baz </p> <a href="x.html" class="button">More</a> </li> <li> <h3>Section 2</h3> <p>Foo <br/> bar </p> <a href="y.html" class="button">More</a> </li> <li> <h3>Section 3</h3> <p>Foo</p> <a href="z.html" class="button">More</a> </li> </ul> 

Answer 2

您可以添加position: relative對於ul而不是li並獲得所需的結果

的HTML

<ul class="threepane">
    <li>
        <h3>Section 1</h3>
        <p>Foo <br /> bar <br /> baz </p>
        <a href="x.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 2</h3>
        <p>Foo <br/> bar </p>
        <a href="y.html" class="button">More</a>
    </li>
    <li>
        <h3>Section 3</h3>
        <p>Foo</p>
        <a href="z.html" class="button">More</a>
    </li>
</ul>

的CSS

.button {
      position: absolute;
      bottom: 0; 
 }

li {
  width: 32%;
  float: left;
  height: 100%;
}

.threepane {
  overflow: hidden;
  position: relative;
}

范例： http : //jsbin.com/xatihoneze/edit?html,css,output

Answer 3

嘗試這個：

<style>
li{
position:relative;
text-align:center;
display: inline-block;
height: 150px;
overflow-y: auto;
}

li p{
display:block;
width:100px;
height:100px;
overflow: auto;
}

li .button{
position: absolute;
bottom:0;
margin: 0 auto;
}

Answer 4

Flexbox可以做到這一點而無需放置任何東西 。

 .threepane { display: flex; margin: 0; } li { flex: 1; display: flex; flex-direction: column; border: 1px solid grey; padding: 1em; } li a { margin-top: auto; align-self: center; } 

 <ul class="threepane"> <li> <h3>Section 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae dolor laboriosam modi ab inventore voluptatum labore quae reiciendis odit totam cum alias quidem minima obcaecati atque ip.</p> <a href="x.html" class="button">More</a> </li> <li> <h3>Section 2</h3> <p>Foo <br/>bar</p> <a href="y.html" class="button">More</a> </li> <li> <h3>Section 3</h3> <p>Foo</p> <a href="z.html" class="button">More</a> </li> </ul>