2016-07-05 8 views
-2

同じ高さの二塔CSS

#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;のような固定された高さを使用することはできません。コンテンツの長さがそれ以上である可能性があるからです。

+0

これはすべての最も古いCSSの質問です...あなたが探して試してみました:あなたはまた、縦方向にセンタリングする内部のdiv内のコンテンツをしたい場合は、ディスプレイを作ることができますそれは投稿する前に? –

+6

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-horizo​​ntal-divs-the-same-height?lq=1 https://stackoverflow.com/questions/33813871/equal-height -columns-with-css?rq = 1 –

+0

答えを探してみると、flexboxはあなたが探しているものを達成することができます... https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – matthewelsom

答えて

0

フレックスボックスを使用して同等の高さにすることができます。これは、外側のラッパーのdivに設定されている:あなたはまた、固定の高さを取り除き、内側のdivに浮くする必要があります

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

#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>

関連する問題