その後これを良しとせず、<div>タグで書くスタイルが紹介された。
しかし、この div タグで書くスタイルは、表示が崩れることがある。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div>
<div class="set">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="set">bbbbbbbbbbbbbb<br/>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>
</body>
</html>
----------- test.css ------------------
@CHARSET "UTF-8";
div {
white-space: nowrap;
vertical-align: top;
}
div.set{
float: left;
padding: 10px;
margin: 4px;
border: 1px solid #0000ff;
}
---------------------------------------
というサンプルは、、、
ＩＥ９で、、、、
これを、ウィンドウを狭めると、、、
chrome でも同じ、、
ウィンドウを狭めると、、、
これは期待しているものと違う。。。
そこで、ＣＳＳの float: left; を廃止して、display: table-cell; で記述する。
ＣＳＳを修正
@CHARSET "UTF-8";
div {
white-space: nowrap;
vertical-align: top;
}
div.set{ /* IE8～, chrome , Opera */
display: table-cell;
padding: 10px;
margin: 4px;
border: 1px solid #0000ff;
}
* html div.set { /* IE 6 */
display: inline;
zoom: 1;
}
*:first-child+html div.set { /* IE 7 */
display: inline;
zoom: 1;
}
修正すると。。。
ＩＥ９
chrome
ＩＥ６
こんなことを書くぐらいなら、table タグで段組みを書いた方が良いのではないだろうか。
