liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のレイアウト関連 - display属性(inline-block、inline-table)

CSS3.0 ┗━CSS3.0のレイアウト関連 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> inline-block属性値 </title>
   <style type="text/css">
        body>div{
            text-align: center;
            margin: auto;
        }
        div>div{
            /* inline-blockで一行表示を保証 */
            display: inline-block;
            border: 1px solid black;
        }
        a {
            text-decoration:none;
            /* block指定で高、幅指定 */
            display: block;
            width: 120px;
            padding: 10px;
            background-color: #eee;
        }
    </style>
</head>
<body>
<div>
    <div><a href="http://www.google.com">google</a></div>
    <div><a href="http://www.yahoo.com">yahoo</a></div>
    <div><a href="http://javait.hatenablog.com">javait</a></div>
</div>
</body>
</html>

f:id:liguofeng29:20160203215917p:plain

table要素はblock box modelである。
一行を占めるため、左右に他の要素が並ばないが、inline-table属性値で左右に他の要素を表示できる。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> inline-table属性値</title>
   <style type="text/css">
        td {
            border: 1px solid black;
        }
        table{
            width: 360px;
            border-collapse: collapse;
            display: inline-table;
            vertical-align: top;
        }
    </style>
</head>
<body>
テーブル前の要素
<table style="">
    <tr><td>行1-1</td><td>行1-2</td></tr>
    <tr><td>行2-1</td><td>行2-2</td></tr>
</table>
テーブル後の要素
</body>
</html>

f:id:liguofeng29:20160203221006p:plain