effiziente und reaktionsschnelle Art und Weise der Textausrichtung unten

Ich versuche, "die Antwort ist thee" Text an den unteren Rand der Seite, Es funktioniert derzeit.effiziente und reaktionsschnelle Art und Weise der Textausrichtung unten

Das Problem tritt auf, wenn ich die Größe des Bildschirms den "großen Text" ändern und "Text beantworten" fällt aus der Ausrichtung als das Element "Big Text" ist volle Höhe (abhängig von der Textmenge). Ich würde den „Antworttext“ nicht gerne festlegen Höhe, sondern reaktions Höhe zu sein, abhängig von der Größe des Inhaltsbereich „großer Text“

Link 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; 
}

Das Bild unten i s richtig, aber es ist ein Satz Höhe bekam, ich brauche die Höhe

Quelle

2016-08-08 Benjamin Oats

Np, ill man jetzt aufstehen –

Also jeder 'li' 100% der Bildschirmhöhe sein sollte? –

Ja, ich habe einen Link zu einer Geige gepostet. Sie müssen die Bildschirmbreite erweitern –

Sie benötigen verschachtelte Flexbox Spalten anspricht oder 100% sein.

Verschachtelte untergeordnete Abschnitte inside your li needs to be a flex-container with flex-Richtung: Spalte.

Der .columns Abschnitt ist nur gegeben display:flex (jedes Kind ist flex:1), so dass die Kinder Höhe sind.

Sobald wir das erreicht haben, können wir den letzten Absatz (Antworttext) mit margin-top:auto an den unteren Rand seiner Spalte schieben.

* { 
 
    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

Quelle

2016-08-08 10:14:31

Ohne die Höhe: 100vh; ja super. Danke. –

effiziente und reaktionsschnelle Art und Weise der Textausrichtung unten

Antwort

Verwandte Themen