高度相等雙塔使用CSS

-2

#DIV_1 { 
 
    bottom: -10px; 
 
    height: 176px; 
 
    left: 0px; 
 
    position: relative; 
 
    right: 0px; 
 
    text-align: left; 
 
    top: 10px; 
 
    width: 379px; 
 
    perspective-origin: 189.5px 88px; 
 
    transform-origin: 189.5px 88px; 
 
    background: rgb(238, 238, 238) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 0px -5px; 
 
    overflow: hidden; 
 
}/*#DIV_1*/ 
 

 
#DIV_2 { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    height: 77px; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    perspective-origin: 94.75px 38.5px; 
 
    transform-origin: 94.75px 38.5px; 
 
    border-right: 5px solid rgb(255, 255, 255); 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    padding: 30px; 
 
}/*#DIV_2*/ 
 

 
#DIV_3 { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    height: 77px; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    perspective-origin: 94.75px 38.5px; 
 
    transform-origin: 94.75px 38.5px; 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    padding: 30px; 
 
}/*#DIV_3*/ 
 

 
#DIV_4 { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    float: left; 
 
    height: 99px; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 94.75px 49.5px; 
 
    transform-origin: 94.75px 49.5px; 
 
    background: rgb(192, 57, 43) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 5px solid rgb(255, 255, 255); 
 
    border-right: 5px solid rgb(255, 255, 255); 
 
    border-bottom: 0px none rgb(255, 255, 255); 
 
    border-left: 0px none rgb(255, 255, 255); 
 
    font: normal normal bold normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    padding: 30px; 
 
}/*#DIV_4*/ 
 

 
#DIV_5 { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    float: left; 
 
    height: 82px; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 94.75px 41px; 
 
    transform-origin: 94.75px 41px; 
 
    background: rgb(142, 68, 173) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 5px solid rgb(255, 255, 255); 
 
    border-right: 0px none rgb(255, 255, 255); 
 
    border-bottom: 0px none rgb(255, 255, 255); 
 
    border-left: 0px none rgb(255, 255, 255); 
 
    font: normal normal bold normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    padding: 30px; 
 
}/*#DIV_5*/

<div id="DIV_1"> 
 
\t <div id="DIV_2"> 
 
\t \t Ben Franklin 
 
\t </div> 
 
\t <div id="DIV_3"> 
 
\t \t Thomas Jefferson 
 
\t </div> 
 
\t <div id="DIV_4"> 
 
\t \t George Washington 
 
\t </div> 
 
\t <div id="DIV_5"> 
 
\t \t Abraham Lincoln 
 
\t </div> 
 
</div>

我有2列，其內容可能有不同的長度，因而它將具有多行，所以我怎麼確保內容的至少線具有等高？我不能使用像height:100px;這樣的固定高度，因爲內容的長度可能會超過這個長度。

來源

2016-07-05 Eunice Chia

這是所有的最古老的CSS問題...你嘗試過搜索爲什麼在發佈之前？ –

https://stackoverflow.com/questions/2114757/css-equal-height-columns?rq=1 https://stackoverflow.com/questions/3936587/two-equal-columns-in-css?lq=1 https://stackoverflow.com/questions/17410057/how-to-make-2-horizontal-divs-the-same-height?lq=1 https://stackoverflow.com/questions/33813871/equal-height -columns-with-css？rq = 1 –

嘗試搜索答案，flexbox可以實現您正在尋找的內容... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – matthewelsom

您可以使用flexbox來實現相同的高度。這是設置在外包裝div上：

#DIV_1 { 
    display: flex; 
    flex-wrap: wrap; 
}

您還需要刪除固定高度並浮動在內部div上。如果你也想在內部的div被垂直居中可以使則內容顯示：

#DIV_2, 
#DIV_3, 
#DIV_4, 
#DIV_5 { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

#DIV_1 { 
 
    bottom: -10px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    left: 0px; 
 
    position: relative; 
 
    right: 0px; 
 
    text-align: left; 
 
    top: 10px; 
 
    width: 379px; 
 
    perspective-origin: 189.5px 88px; 
 
    transform-origin: 189.5px 88px; 
 
    background: rgb(238, 238, 238) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    margin: 0px 0px -5px; 
 
    overflow: hidden; 
 
}/*#DIV_1*/ 
 

 
#DIV_2 { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    perspective-origin: 94.75px 38.5px; 
 
    transform-origin: 94.75px 38.5px; 
 
    border-right: 5px solid rgb(255, 255, 255); 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    padding: 30px; 
 
}/*#DIV_2*/ 
 

 
#DIV_3 { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    width: 189.5px; 
 
    perspective-origin: 94.75px 38.5px; 
 
    transform-origin: 94.75px 38.5px; 
 
    font: normal normal normal normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    padding: 30px; 
 
}/*#DIV_3*/ 
 

 
#DIV_4 { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    text-align: center; 
 
    width: 189.5px; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 94.75px 49.5px; 
 
    transform-origin: 94.75px 49.5px; 
 
    background: rgb(192, 57, 43) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 5px solid rgb(255, 255, 255); 
 
    border-right: 5px solid rgb(255, 255, 255); 
 
    border-bottom: 0px none rgb(255, 255, 255); 
 
    border-left: 0px none rgb(255, 255, 255); 
 
    font: normal normal bold normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    padding: 30px; 
 
}/*#DIV_4*/ 
 

 
#DIV_5 { 
 
    box-sizing: border-box; 
 
    color: rgb(255, 255, 255); 
 
    text-align: center; 
 
    width: 189.5px; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 94.75px 41px; 
 
    transform-origin: 94.75px 41px; 
 
    background: rgb(142, 68, 173) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border-top: 5px solid rgb(255, 255, 255); 
 
    border-right: 0px none rgb(255, 255, 255); 
 
    border-bottom: 0px none rgb(255, 255, 255); 
 
    border-left: 0px none rgb(255, 255, 255); 
 
    font: normal normal bold normal 14px/normal "Lucida Grande", Helvetica, Arial, sans-serif; 
 
    list-style: none outside none; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    padding: 30px; 
 
}/*#DIV_5*/

<div id="DIV_1"> 
 
\t <div id="DIV_2"> 
 
\t \t Ben Franklin 
 
\t </div> 
 
\t <div id="DIV_3"> 
 
\t \t Thomas Jefferson 
 
\t </div> 
 
\t <div id="DIV_4"> 
 
\t \t George Washington 
 
\t </div> 
 
\t <div id="DIV_5"> 
 
\t \t Abraham Lincoln 
 
\t </div> 
 
</div>

來源

2016-07-05 02:34:35 jerrylow

高度相等雙塔使用CSS

回答

相關問題