根據內容更改文字對齊

Question

我得到了「標題」，「說明」和按鈕。根據以下方案我想顯示該內容（給定一個參考鏈路用於每個場景）

方案1：用描述&兩個按鈕 「標題」標題被定位在與所述「描述」下面左對齊的頂標題。兩個正常的CTA按鈕與'說明'一致。

場景2：瓷磚與描述&一個按鈕 「標題」被定位在與所述「描述」標題下左對齊的頂部。一個正常的CTA按鈕與'描述'一致。

方案3：標題與描述&否按鈕 「標題」被定位在與下面的中心對準描述而不CTA按鈕的頂部。

場景4：題目有一個或兩個按鈕/否說明 Title和按鈕應該是在同一條線上

.text-center { 
 
    text-align: center; 
 
} 
 

 
.cta { 
 
    display: table; 
 
} 
 

 
.cta-content, 
 
.cta-title, 
 
.cta-button { 
 
    display: table-cell; 
 
}

<!-- Scenario 1--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
    </div> 
 
    <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
     <a href="javascript:void(0)">Find out more</a> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Scenario 2--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
    </div> 
 
    <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Scenario 3--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Scenario 4--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
    </div> 
 
    </div> 
 
</div>

我上面的CSS並不適用於所有情況下工作。我不想使用JavaScript或Jquery，除非它們在CSS中沒有選項。請幫助

Answer 1

我有類似皮特（Test it on jsfiddle）的解決方案，但對於方案4是沒有辦法只在HTML/CSS 來實現它（如你想）。幾行JavaScript不應該傷害頁面。

（@ LOKESH的解決方案不起作用，因爲它的「alignLine」 DIV不放在同一個地方的場景4）

 .text-center { 
 
    text-align: center; 
 
} 
 

 
.cta-wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-around; 
 
    width: 100%; 
 
} 
 

 
.cta-content { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 

 
.cta-button { 
 
    display: flex; 
 
    align-items:center; 
 
}

<!-- Scenario 1--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-wrapper"> 
 
     <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
     </div> 
 
     <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
     </div> 
 
     <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Scenario 2--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-wrapper"> 
 
     <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
     </div> 
 
     <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Scenario 3--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-wrapper"> 
 
     <div class="cta-content"> 
 
     <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<!-- Scenario 4--> 
 
<div class="cta-module row bottom-divider text-center"> 
 
    <div class="cta content-wrapper col-12"> 
 
    <div class="cta-title"> 
 
     <h2>Achieve your goal</h2> 
 
    </div> 
 
    <div class="cta-wrapper"> 
 
     <div class="cta-button"> 
 
     <a href="javascript:void(0)">Find out more</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>