無法將按鈕定位到柔性容器的底部（當導入到WordPress時）

Question

我對Flexbox相當陌生，但我設法創建了一個基本定價表。我希望實現的關鍵事項之一是在列/ flex容器的底部放置「註冊」按鈕（出現在每列中）。我的HTML和CSS在本地完美工作（在Chrome中測試），但是我想將它導入到WordPress中（只需通過子主題CSS並將HTML放入相關頁面的編輯器中）。當我這樣做時，除了按鈕定位之外，一切正常。按鈕不再位於容器的底部。

當我使用開發工具檢查wordpress代碼時，'margin-top：auto'CSS聲明似乎存在，所以我無法弄清楚爲什麼它沒有被應用。

這裏是我的HTML &相關Flexbox的相關CSS：

<div class="p_columns"> 
    <div class="p_price p_bdr_1"> 
     <ul class="p_ul"> 
      <li class="p_header">Free</li> 
      <li class="p_sub_header">Basic</li> 
      <li class="p_li">Limited support</li> 
      <li class="p_li">Lots of Storage</li> 
      <li class="p_li">High speed bandwidth</li> 
      <li class="p_li">Premium design</li> 
     </ul> 
     <a href="#" class="p_btn">Activate</a> 

    </div> 
    <div class="p_price p_bdr_2"> 
     <ul class="p_ul"> 
      <li class="p_header">Free</li> 
      <li class="p_sub_header">Basic</li> 
      <li class="p_li">Limited support</li> 
      <li class="p_li">Lots of Storage</li> 
      <li class="p_li">High speed bandwidth</li> 
      <li class="p_li">Premium design</li> 
     </ul> 
     <a href="#" class="p_btn">Sign Up</a> 
    </div> 
    <div class="p_price p_bdr_3"> 
     <ul class="p_ul"> 
      <li class="p_header">Free</li> 
      <li class="p_sub_header">Basic</li> 
      <li class="p_li">Limited support</li> 
      <li class="p_li">Lots of Storage</li> 
      <li class="p_li">High speed bandwidth</li> 
      <li class="p_li">Premium design</li> 
     </ul> 
     <a href="#" class="p_btn">Sign Up</a> 
    </div> 
    <div class="p_price p_bdr_4"> 
     <ul class="p_ul"> 
      <li class="p_header">Free</li> 
      <li class="p_sub_header">Basic</li> 
      <li class="p_li">Limited support</li> 
      <li class="p_li">Lots of Storage</li> 
      <li class="p_li">High speed bandwidth</li> 
      <li class="p_li">Premium design</li> 
     </ul> 
     <a href="#" class="p_btn">Sign Up</a> 
    </div> 
</div> 

.p_columns { 
display: flex; 
flex-flow: row wrap; 
max-width: 85%; 
min-height: 700px; 
} 

.p_price { 
    display: flex; 
    flex: 1 0 200px; 
    flex-flow: column; 
} 

.p_btn { 
    margin-top: auto; 
} 

任何幫助，將不勝感激！

謝謝，託德

Answer 1

地址：

.p_price { 
    display: flex; 
    flex: 1 0 200px; 
    flex-flow: column; 
    position:relative; 
} 
.p_price p { 
    position:absolute; 
    bottom:0; 
} 

對於還爲中心的按鈕，使用此代碼片段：

.p_price { 
    display: flex; 
    flex: 1 0 200px; 
    flex-flow: column; 
    position:relative; 
} 
.p_price p { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    text-align:center; 
} 

Answer 2

你a.p_btn標籤被包裹在p標籤 - 如果你刪除這些它恢復您所需的佈局。

Wordpress會自動將雙行換行轉換爲段落標籤。這可能是值得關閉自動段落過濾器wpautophttps://codex.wordpress.org/Function_Reference/wpautop#Disabling_the_filter