具有相同高度的容器未從頂部對齊

我希望能夠使容器具有相同的高度 - 即使其內容文本的數量不相同，也不設置固定高度。正如你可以在codepen鏈接上看到的那樣，容器沒有相同的高度，並且沒有與頂部對齊。基本上我想要實現的行爲是讓所有容器具有相同的高度（等於容器高度最大），因此容器必須從頂部和底部對齊。具有相同高度的容器未從頂部對齊

.info-block-tile-table{ 
    position: relative; 
    overflow: hidden; 
    display: table; 
    table-layout: fixed; 
    margin-bottom: 1rem; 
    width: 100%; 
} 

.info-block-tile-row{ 
    display: table-row; 
} 

.info-block-tile-cell{ 
    width: 25%; 
    display: table-cell; 
    float: none; 
    padding: 1rem; 
} 

.info-block-tile { 
    border-top: 5px solid #69be28; 
    border-right: 1px solid #dfe1e4; 
    border-left: 1px solid #dfe1e4; 
    border-bottom: 1px solid #dfe1e4; 
    float: left; 
    padding: 0.5rem 
} 




<div> 

    <div class="info-block-tile-table"> 
    <div class="info-block-tile-row"> 
     <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

      <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
      <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor 
      sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, 
      vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci 
      persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 


      <a href="http://www.google.com" 
      class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left" 
      target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 


     </div> 

     <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

      <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
      <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor 
      sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique </p> 


      <a href="http://www.google.com" 
      class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left" 
      target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 


     </div> 

     <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

      <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
      <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor 
      sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, 
      vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci 
      persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 


      <a href="http://www.google.com" 
      class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left" 
      target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 


     </div> 

    </div> 
    <div class="info-block-tile-row"> 
     <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

      <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
      <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor 
      sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. T 
      </p> 


      <a href="http://www.google.com" 
      class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left" 
      target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 


     </div> 

     <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

      <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
      <p class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor 
      sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, 
      vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci 
      persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 


      <a href="http://www.google.com" 
      class="aligned-bottom text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 margin-top__4 padding-leftright__4 position-float__left" 
      target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 


     </div> 

    </div> 
    </div> 

</div>

codepen鏈接：http://codepen.io/neginbasiri/pen/wWvjba

來源

2016-05-30 Negin Basiri

什麼是你想要的行爲？這些容器是底部對齊的，除非您設置固定的高度和滾動，否則不能有相同的尺寸。你想要它頂部對齊和固定高度滾動嗎？ – Ash

我更新了說明。容器必須從頂部和底部對齊，高度相同 –

要align-top一個塊，你可以使用：

.info-block-tile-cell { 
    // Your code 
    vertical-align: top; 
}

而且在table-cell全高的容器中，加入更多的代碼：

.info-block-tile-table, 
.info-block-tile { 
    height: 100%; 
}

來源

2016-05-30 01:20:52 WorkWe

容器必須從頂部和底部對齊 - 這意味着必須具有相同的高度 –

請參閱我上面更新的內容，希望它對您有所幫助。 – WorkWe

更改CSS class .info-block-tile-cell會讓你頂部對齊如下：

.info-block-tile-cell{ 
    width: 25%; 
    display: table-cell; 
    float: none; 
    padding: 1rem; 
    vertical-align: top; 
}

可以使瓷磚滾動條固定高度如下：

.info-block-tile { 
    border-top: 5px solid #69be28; 
    border-right: 1px solid #dfe1e4; 
    border-left: 1px solid #dfe1e4; 
    border-bottom: 1px solid #dfe1e4; 
    float: left; 
    padding: 0.5rem; 
    height:100%; 
    overflow:auto; 
}

來源

2016-05-30 01:31:02 Ash

仍然沒有相同的高度。它必須從頂部和底部對齊 –

對於相同的高度，你需要在'.info-block-tile'中設置一個'height'和'overflow'模式。我編輯了答案來展示這一點。從頂部和底部對齊是不可能的。你的意思是把它對齊到段落的中間。 – Ash

我知道這是可能的。我以前做過，但不知道爲什麼這次不行。 –

使用此西港島線是工作.. :)

.info-block-tile-table, 
.info-block-tile { 
    height: 100%; 
verticle-align:top; 
}

來源

2016-05-30 11:45:26

好吧，我解決了它。這裏是解決方案的鏈接以供參考。

http://codepen.io/neginbasiri/pen/wWvjba

<div class="info-block-tile-table"> 
    <div class="info-block-tile-row"> 
    <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

     <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
     <p class="margin-top__0 margin-bottom__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit 
      amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, vim id 
      idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci persecuti an 
      pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 

     <div class="tile-button-container"> 
      <a href="http://www.google.com" class="text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 padding-leftright__4 margin-bottom__4 position-float__left" target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 

     </div> 

    </div> 




    <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

     <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
     <p class="margin-top__0 margin-bottom__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit 
      amet, ias te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci persecuti an 
      pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 

     <div class="tile-button-container"> 
      <a href="http://www.google.com" class="text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 padding-leftright__4 margin-bottom__4 position-float__left" target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 

     </div> 

    </div> 




    <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

     <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
     <p class="margin-top__0 margin-bottom__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit 
      amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, vim id 
      idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci persecuti an 
      pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 

     <div class="tile-button-container"> 
      <a href="http://www.google.com" class="text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 padding-leftright__4 margin-bottom__4 position-float__left" target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 

     </div> 

    </div> 




    </div> 
    <div class="info-block-tile-row"> 
    <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

     <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
     <p class="margin-top__0 margin-bottom__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit 
      amet 
      pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 

     <div class="tile-button-container"> 
      <a href="http://www.google.com" class="text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 padding-leftright__4 margin-bottom__4 position-float__left" target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 

     </div> 

    </div> 




    <div class="info-block-tile-cell"> 
     <div class="info-block-tile"> 

     <h6 class="margin-top__0 margin-bottom__2 fiord font-weight-sourcesans__bold">Offering 1</h6> 
     <p class="margin-top__0 margin-bottom__10 fiord font-weight-sourcesans__normal font-size__7">Lorem ipsum dolor sit 
      amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique percipitur ex vim, vim id 
      idque soleat tibique, has te erant doctus complectitur. Nusquam oportere vituperata id cum, adipisci persecuti an 
      pro. Eu vim facer graecis, id nec dicta integre interpretaris</p> 

     <div class="tile-button-container"> 
      <a href="http://www.google.com" class="text-decoration__none rounded__thick corporateGreen white__hover background-corporateGreen__hover border border-width__2 font-size__6 padding-topbottom__1 padding-leftright__4 margin-bottom__4 position-float__left" target="_blank"> 
      <i class="fa fa-chevron-right"></i> 
      Learn More 
      </a> 
     </div> 

     </div> 

    </div> 




    </div> 
</div>

而且款式：

.info-block-tile-table{ 
    position: relative; 
    overflow: hidden; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 2rem; 
} 

.info-block-tile-row{ 
    display: table-row; 
} 

.info-block-tile-cell{ 
    width: 25%; 
    display: table-cell; 
    float: none; 
    border-top: 5px solid #69be28; 
    border-right: 1px solid #dfe1e4; 
    border-left: 1px solid #dfe1e4; 
    border-bottom: 1px solid #dfe1e4; 
    position: relative; 

} 

.info-block-tile-cell .tile-button{ 
    position: absolute; 
    bottom: 0px; 
} 

.tile-button-container{ 
    position: absolute; 
    bottom: 0; 
} 

.tile-button-container > a{ 
    text-decoration: none; 
    padding-left: 1rem; 
    padding-right: 1rem; 
    color: #69be28; 
    border-radius: 5px; 
    border-style: solid; 
    border-width: 2px; 
    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    float: left; 
} 

.margin-bottom__4 { 
    margin-bottom: 1rem; 
} 


.margin-bottom__10 { 
    margin-bottom: 2.25rem; 
} 

.info-block-tile { 
    padding: 1rem; 
}

來源

2016-05-30 23:26:01

具有相同高度的容器未從頂部對齊

回答

相關問題