2017-03-14 5 views
0

目的:内容に関係なく列の高さが同じです。私はこれらのカードを、その内容にかかわらず同じ高さにしたいと思っています。フレックスボックスフォールバック。フローティング列には表+表セルが表示されます

display:flexを使用できるようにしたい。 IE8よりも低いレベルのサポートが必要なため、私はできません。私のコードスニペットは、私が作業しているグリッドを示しています。

.row { 
 
    display: table; 
 
} 
 

 
.row .one { 
 
    width: 6.475%; 
 
} 
 

 
.row .two { 
 
    width: 14.975%; 
 
} 
 

 
.row .three { 
 
    width: 23.475%; 
 
} 
 

 
.row .four { 
 
    width: 31.975%; 
 
} 
 

 
.row .five { 
 
    width: 40.475%; 
 
} 
 

 
.row .six { 
 
    width: 48.975%; 
 
} 
 

 
.row .seven { 
 
    width: 57.475%; 
 
} 
 

 
.row .eight { 
 
    width: 65.975%; 
 
} 
 

 
.row .nine { 
 
    width: 74.475%; 
 
} 
 

 
.row .ten { 
 
    width: 82.975%; 
 
} 
 

 
.row .eleven { 
 
    width: 91.475%; 
 
} 
 

 
.row .twelve { 
 
    width: 100%; 
 
} 
 

 
.column { 
 
    display: table-cell; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.column:last-child { 
 
    float: right; 
 
} 
 

 
.card { 
 
    background: #fefefe; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
 
    padding: 1em; 
 
    border: 1px solid #e5e5e5; 
 
    border-left: 2px solid green; 
 
    border-radius: 0 3px 3px 0; 
 
}
<div class="row"> 
 
    <div class="nine column card"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="three column card"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 
 
    </div> 
 
</div>
あなたは親表示を行う場合:それは完璧に動作しますが、私は古いブラウザのフォールバックが必要に曲がります。

注:私は問題が浮動列を持っていることを認識していますが、これは変更できません(小さなプレゼンテーションの強化を加えるだけで、使用しているフレームワークのグリッド全体を変更できません)。

この問題を回避する方法があるかどうかを知りたいですか?

https://css-tricks.com/fluid-width-equal-height-columns/テーブルとテーブルセルを使用したすべてのソリューションのうち、非常に簡単な修正ですが、カラムが左に浮いている(これは変更できません)ため、機能しません。

誰もがこの問題に遭遇しましたか? Javascriptは唯一の代替手段ですか?

答えて

0

一方向は、同じ値を持つ行内のdivに最小高さと最大高さを強制します。しかし、コンテンツが要素の外に出ないように、オーバーフローが必要です。

.row { 
 
    display: table; 
 
    
 
} 
 
.row div{ 
 
max-height:100px; 
 
    min-height:100px; 
 
overflow:auto; 
 
} 
 

 
.row .one { 
 
    width: 6.475%; 
 
} 
 

 
.row .two { 
 
    width: 14.975%; 
 
} 
 

 
.row .three { 
 
    width: 23.475%; 
 
} 
 

 
.row .four { 
 
    width: 31.975%; 
 
} 
 

 
.row .five { 
 
    width: 40.475%; 
 
} 
 

 
.row .six { 
 
    width: 48.975%; 
 
} 
 

 
.row .seven { 
 
    width: 57.475%; 
 
} 
 

 
.row .eight { 
 
    width: 65.975%; 
 
} 
 

 
.row .nine { 
 
    width: 74.475%; 
 
} 
 

 
.row .ten { 
 
    width: 82.975%; 
 
} 
 

 
.row .eleven { 
 
    width: 91.475%; 
 
} 
 

 
.row .twelve { 
 
    width: 100%; 
 
} 
 

 
.column { 
 
    display: table-cell; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.column:last-child { 
 
    float: right; 
 
} 
 

 
.card { 
 
    background: #fefefe; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
 
    padding: 1em; 
 
    border: 1px solid #e5e5e5; 
 
    border-left: 2px solid green; 
 
    border-radius: 0 3px 3px 0; 
 
}
<div class="row"> 
 
    <div class="nine column card"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
    <div class="three column card"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. 
 
    </div> 
 
</div>

関連する問題