私はこのデザインをコーディングしようとしている別のdiv

Question

の下部にあるスティックのdiv：

そして、これは私が持っているコードです：

.container-flex { 
 
    display: flex; 
 
    flex-flow: row; 
 
    height: 100px; 
 
} 
 
.left { 
 
    flex: 1; 
 
    background-color: #2C77A5; 
 
    padding-top: 2%; 
 
    border-top-left-radius: 6px; 
 
    height: 100px; 
 
} 
 
.main { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top { 
 
    background: #27698D; 
 
    border-bottom: 1px solid #2a2a2a; 
 
    border-top-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 14px; 
 
} 
 
.middle { 
 
    background: #27698D; 
 
    border-bottom-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 16px; 
 
} 
 
.row-celeste { 
 
    height: 22%; 
 
    background-color: #8CE8FC; 
 
}

<div class="container-flex"> 
 
    <div class="left"> 
 
    <div class="row"> 
 
     <div class="col-md-7 col-md-offset-1 border-right"> 
 
     <p class="card-text white-text">Mejorar clima en finanzas</p> 
 
     <h4 class="card-subtitle white-text">Ponderación 33%</h4> 
 
     </div> 
 
     <div class="col-md-4 check-area"> 
 
     <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p> 
 
     </div> 
 
    </div> 
 
    <div class="row-celeste"> 
 
     <p class="card-text centered"></p> 
 
    </div> 
 
    </div> 
 
    <section class="main"> 
 
    <a href=""> 
 
     <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    <a href=""> 
 
     <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    </section> 
 
</div>

どのようにすることができます私はライトブルーの行を、その高さにかかわらず ".left"の底に貼り付けますか？私はポジショニングを試みましたが、おそらく私はそれを本当に理解していません。

Answer 1

これは問題ありませんか？あなたがabsolute位置決めを使用する必要が

<style> 
 
.container-flex { 
 
    display: flex; 
 
    flex-flow: row; 
 
    height: 100px; 
 
} 
 
.left { 
 
    flex: 1; 
 
    background-color: #2C77A5; 
 
    padding-top: 2%; 
 
    border-top-left-radius: 6px; 
 
    height: 100px; 
 
} 
 
.main { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top { 
 
    background: #27698D; 
 
    border-bottom: 1px solid #2a2a2a; 
 
    border-top-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 14px; 
 
} 
 
.middle { 
 
    background: #27698D; 
 
    border-bottom-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 16px; 
 
} 
 
.row-celeste { 
 
    height: 22%; 
 
    background-color: #8CE8FC; 
 
} 
 
    .row-celeste { 
 
\t height: 22%; 
 
\t background-color: #8CE8FC; 
 
\t bottom: 0; 
 
\t position: absolute; 
 
\t width: 100%; 
 
} 
 
</style> 
 
<div class="container-flex"> 
 
<div class="left"> 
 
    <div class="row"> 
 
     <div class="col-md-7 col-md-offset-1 border-right"> 
 
     <p class="card-text white-text">Mejorar clima en finanzas</p> 
 
     <h4 class="card-subtitle white-text">Ponderación 33%</h4> 
 
     </div> 
 
     <div class="col-md-4 check-area"> 
 
     <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p> 
 
     </div> 
 
    </div> 
 
    <div class="row-celeste"> 
 
     <p class="card-text centered"></p> 
 
    </div> 
 
    </div> 
 
    <section class="main"> 
 
    <a href=""> 
 
     <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    <a href=""> 
 
     <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    </section> 
 
</div>

Answer 2

、以下の例を参照：ライトブルー行がDIVである必要はない

.container-flex { 
 
    display: flex; 
 
    flex-flow: row; 
 
    height: 100px; 
 
} 
 
.left { 
 
    flex: 1; 
 
    background-color: #2C77A5; 
 
    padding-top: 2%; 
 
    border-top-left-radius: 6px; 
 
    height: 100px; 
 
    position: relative; /* must be set to the container of the absolute positioned element */ 
 
} 
 
.main { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top { 
 
    background: #27698D; 
 
    border-bottom: 1px solid #2a2a2a; 
 
    border-top-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 14px; 
 
} 
 
.middle { 
 
    background: #27698D; 
 
    border-bottom-right-radius: 6px; 
 
    width: 42px; 
 
    height: 50px; 
 
    padding-left: 14px; 
 
    padding-top: 16px; 
 
} 
 
.row-celeste { 
 
    height: 22px; 
 
    background-color: #8CE8FC; 
 
    position: absolute; /* this will make your div position calculated respecting its container */ 
 
    bottom: -19px; /* this will stick it to the bottom */ 
 
    width: 100%; 
 
    z-index: -1; 
 
}

<div class="container-flex"> 
 
    <div class="left"> 
 
    <div class="row"> 
 
     <div class="col-md-7 col-md-offset-1 border-right"> 
 
     <p class="card-text white-text">Mejorar clima en finanzas</p> 
 
     <h4 class="card-subtitle white-text">Ponderación 33%</h4> 
 
     </div> 
 
     <div class="col-md-4 check-area"> 
 
     <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p> 
 
     </div> 
 
    </div> 
 
    <div class="row-celeste"> 
 
     <p class="card-text centered"></p> 
 
    </div> 
 
    </div> 
 
    <section class="main"> 
 
    <a href=""> 
 
     <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    <a href=""> 
 
     <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i> 
 
     </div> 
 
    </a> 
 
    </section> 
 
</div>

Answer 3

を。それはあなたがフレックスボックスでそれを行うことができますちょうど青い枠

#box { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    border-radius: 6px; 
 
    overflow: hidden; 
 
} 
 
#left { 
 
    background-color: #0073a9; 
 
    border-bottom: 10px solid #6aebff; /* Light blue "bar" */ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
#left > * { 
 
    padding: 10px 20px; 
 
} 
 
#left > *:not(:first-child) { 
 
    border-left: 1px solid black; 
 
} 
 
#right { 
 
    background-color: #00688f; 
 
    display: flex; 
 
    flex-direction: column; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
} 
 
#right > * { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    padding: 5px 10px; 
 
    text-align: center; 
 
} 
 
#right > *:not(:first-child) { 
 
    border-top: 1px solid black; 
 
} 
 
.centered-container { 
 
    display: flex; 
 
    direction: row; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#ellipsis { 
 
    line-height: 30%; 
 
} 
 
* { 
 
    color: white; 
 
} 
 
#left { 
 
    font-family: sans, "Raleway"; 
 
}

<div id="box"> 
 
    <div id="left"> 
 
    <div id="title-div" class="centered-container"> 
 
     <div> 
 
     <p><b>Mejorar políticas de liderazgo</b><br>Ponderación 40%</p> 
 
     </div> 
 
    </div> 
 
    <div id="qualify-div" class="centered-container"> 
 
     &#10004; Calificar 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <div id="ellipsis" class="centered-container"> 
 
     <div>·<br>·<br>·</div> 
 
    </div> 
 
    <div class="centered-container"> 
 
     <div>+</div> 
 
    </div> 
 
    </div> 
 
</div>