box-sizing:border-box;float:left要素を使用して単純なテーブルを作成しようとしています。
警告 1. 私のアプローチが悪いのかもしれません。このタスクを完了するために "float" および "box-sizing" プロパティを使用する必要がないかもしれません。警告 2. もちろん、このマークアップを表示するには最新の CSS3 対応ブラウザを使用する必要があることを覚えておく必要があります :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div {
vertical-align:top;
margin:0px;
padding:0px;
}
div.table {
border:solid 2px green;
width:90%;
background-color:red;
}
div.table > div:not(.clear)
{
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
max-height:8em;
overflow:auto;
border:solid thin black;
background-color:white;
}
div.table > div:nth-child(3n+1):not(.clear)
{
clear:left;
width:40%;
}
div.table > div:nth-child(3n+2):not(.clear),div.table > div:nth-child(3n+3):not(.clear) {width:30%;}
div.clear {clear:both;height:0px;border-style:none;}
</style>
</head>
<body>
<div class="table">
<div>
Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first
</div>
<div>Middle first</div>
<div>Right first</div>
<div>Left second</div>
<div>Middle second</div>
<div>Right second</div>
<div class="clear"></div>
</div>
</body>
</html>
赤いゾーンが表示されます。これは、「中央が最初」と「右が最初」の div の高さが、行の最大の高さを持つ要素に合わせて伸びていないことを示しています。それらに自動的に高さを伸ばすように強制するにはどうすればよいですか? 私は純粋な CSS ソリューションを好みますが、非常に大きなテーブルを処理できる場合は、javascript (jquery) ソリューションを受け入れます...
編集: もちろん、フローティング要素を使用することは私の仕事のアプローチではありません。忘れてください。私は実装が好きではありませんが、これは私が望むものをよりよく理解するかもしれません:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div {vertical-align:top;margin:0px;padding:0px;}
div.table {display:inline-block;border:solid 2px green;background-color:red;}
div.table > div{display:inline-block;
max-height:8em;overflow:auto;
border:solid thin black;background-color:white;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document).ready(function () {
$('<br />').insertAfter($("div.table > div:nth-child(3n+3)").not(':last'));
$("div.table > div:nth-child(4n+1)").each(function () {
$(this).css('width', '15em');
if ($(this).height() < $(this).next('div').height() || $(this).height() < $(this).next('div').next('div').height()) {
$(this).height(Math.max($(this).next('div').height(), $(this).next('div').next('div').height()));
}
});
$("div.table > div:nth-child(4n+2)").each(function () {
$(this).css('width', '10em');
if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).next('div').height()) {
$(this).height(Math.max($(this).prev('div').height(), $(this).next('div').height()));
}
});
$("div.table > div:nth-child(4n+3)").each(function () {
$(this).css('width', '10em');
if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).prev('div').prev('div').height()) {
$(this).height(Math.max($(this).prev('div').height(), $(this).prev('div').prev('div').height()));
}
});
});
</script>
</head>
<body>
<div class="table">
<div>Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first</div><div>Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />longlonglonglonglonglonglonglonglonglong</div><div>Right first</div>
<div>Left second</div><div>Middle second Middle second Middle second<br />longlonglonglonglonglonglonglonglonglong</div><div>Right second</div>
</div>
</body>
</html>
短所: 1. 醜い JS の束が必要です。2. スクロールバーが存在するとき、またはページをズームしたときに表示される赤いゾーンがあります。それらはブラウザによって異なります。彼らがどこから来たのか知っている人はいますか？それらを取り除くことは可能ですか？いいえの場合は、equalHeights jquery プラグインのようなものを利用しようとします
編集 2:
行内のすべての要素の高さを均等化するスクリプトを見つけましたが、それを使用するスクリプトがないことに気付いたので、使用しません。大きなテーブルのような構造に適用できます。CSS フレキシブル ボックス レイアウト モジュールは解決策ですが、現在、主要なブラウザーではサポートされておらず、通常のテーブルよりもはるかに遅くレンダリングされています。