高度相等双塔使用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

回答

相关问题