文本對齊的高效和響應方式底部

我試圖將「答案就是你」的文本定位到頁面底部，它目前正常。文本對齊的高效和響應方式底部

當我調整屏幕大小時，「大文本」和「答案文本」因爲「大文本」元素爲全高（取決於文本數量）而不再對齊，所以出現問題。我想「答覆文件」不設定高度，但爲響應高度依賴於內容區域「大文本」

的大小鏈接fiddel HERE

HTML

<head> 
    <link href="https://get.gridsetapp.com/35679/" rel="stylesheet" /> 
</head> 

<li class="aside-open-close active"> 
    <a class="aside-opener" href="#">Q1. Question here.</a> 
    <div class="slide"> 
    <div class="columns"> 

     <div class="d1-d3"> 
     <p>one</p> 
     <p>two</p> 
     <p>three</p> 
     <p class="answer-box">three - The answer is three</p> 
     </div> 

     <div class="d4-d6 grey-border"> 
     <p>big text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text 
      herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig 
      text herebig text herebig text herebig text herebig text here</p> 
     </div> 

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

CSS

.aside-opener { 
    font-size: 16px !important; 
    font-weight: 600 !important; 
} 

.answer-box { 
    display: flex; 
    align-items: flex-end; 
    /* width: 100%; */ 
    height: 290px; 
} 

.grey-border { 
    border: 1px solid rgba(68, 68, 68, .54); 
    margin-top: 15px; 
} 

.grey-border p { 
    padding: 0 10px 0 10px; 
    font-size: 16px; 
    font-weight: 600; 
    line-height: 19px; 
}

波紋管我的圖像的正確，但它有一個設定的高度，我需要的高度響應或100％

來源

2016-08-08 Benjamin Oats

NP，生病送一起來現在屏幕高度的 –

因此，每個'li'應該是100％？ –

是的，我發佈了一個小提琴的鏈接。您將需要擴大屏幕寬度 –

您需要嵌套Flexbox的列。

嵌套子節inside your li needs to be a flex-container with flex-direction：column`。

.columns部分只給出了display:flex（每個孩子都是flex:1），這樣孩子們的身高才會高。

一旦我們實現了這個目標，我們可以用margin-top:auto將最後一段（答案文本）推到其欄底部。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.slide { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.columns { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.d1-d3 { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.aside-opener { 
 
    font-size: 16px !important; 
 
    font-weight: 600 !important; 
 
    background: lightgrey; 
 
} 
 
.answer-box { 
 
    margin-top: auto; 
 
    text-align: right; 
 
} 
 
.grey-border { 
 
    border: 1px solid rgba(68, 68, 68, .54); 
 
    flex: 1; 
 
} 
 
.grey-border p { 
 
    padding: 0 10px 0 10px; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
    line-height: 19px; 
 
}

<ul> 
 
    <li class="aside-open-close active"> 
 
    <a class="aside-opener" href="#">Q1. Question here.</a> 
 
    <div class="slide"> 
 
     <div class="columns"> 
 

 
     <div class="d1-d3"> 
 
      <p>one</p> 
 
      <p>two</p> 
 
      <p>three</p> 
 
      <p class="answer-box">three - The answer is three</p> 
 
     </div> 
 

 
     <div class="d4-d6 grey-border"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore qui tenetur officia, hic illum fugit deleniti</p> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

JSFiddle Demo

來源

2016-08-08 10:14:31

沒有高度：100vh;是的，完美。謝謝。 –

文本對齊的高效和響應方式底部

回答

相關問題