平等垂直間距按鈕

Question

目前，它的外觀頁：

的目標：我想在做相同的高度設置，無論橙色按鈕（模糊）它上面的文字。

相關SCSS：

.medium-2 { 
    padding: .5rem; 
    background-color: white; 
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10); 
    margin-left: 2.5em; 
    text-align: center; 
    float: left; 
    width: 20%; 
    height: 450px; 
    h4 { 
     font-size: 16px; 
     border: none; 
     color: #5d5d5d; 
     font-family: $font-family-sans-serif; 
    } 
    p { 
     padding-bottom: 10%; 
    } 
    .button { 
     text-align: center; 
    } 
    } 

是否有非哈克的方式做到這一點？現在我唯一的解決辦法是進入html.erb文件，並在p的較小塊中添加一些額外的padding-down以將橙色按鈕按下。

Answer 1

Flexbox可以輕鬆解決這個問題。

.content { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    margin-right: 10px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
button { 
 
    margin-top: auto; 
 
    width: 200px; 
 
}

<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p> 
 
    <button>Button</button> 
 
</div> 
 

 
<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <button>Button</button> 
 
</div>