文本对齐的高效和响应方式底部

我试图将“答案就是你”的文本定位到页面底部，它目前正常。文本对齐的高效和响应方式底部

当我调整屏幕大小时，“大文本”和“答案文本”因为“大文本”元素为全高（取决于文本数量）而不再对齐，所以出现问题。我想“答复文件”不设定高度，但为响应高度依赖于内容区域“大文本”

的大小链接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;是的，完美。谢谢。 –

文本对齐的高效和响应方式底部

回答

相关问题