効率的で反応性のあるテキストアラインメントの方法

私はページの下部に「答えはあなたです」というテキストを配置しようとしていますが、現在動作しています。効率的で反応性のあるテキストアラインメントの方法

問題は、「ビッグテキスト」要素がフル高さ（テキスト量に応じて）であるため、「ビッグテキスト」と「回答テキスト」が整列していない場合に発生します。私は高さを設定することが、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>

をfiddelするコンテンツエリア「大きな文字」

リンクの大きさに応じて、応答性の高さではないことに、「テキストに答える」を希望します私怒鳴る

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、病気の今1を立ち上げ –

したがって、各 'li'は、画面の高さの100％でなければなりませんか？ –

ええ、Iveはフィドルへのリンクを投稿しました。画面の幅を広げる必要があります –

する必要があります。

ネストされた子セクションinside your li needs to be a flex-container withフレックス方向：列 `。

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;はい、完璧です。ありがとうございました。 –

効率的で反応性のあるテキストアラインメントの方法

答えて

関連する問題