liguofeng29’s blog

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

CSS3.0のレイアウト関連 - float属性

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> float属性 </title>
   <style type="text/css">
        div {
            border:1px solid black;
            width: 150px;
            height: 80px;
            padding: 5px;
        }        
    </style>
</head>
<body>
<div style="float:left;">
float:left; 左に浮く1
</div>
<div style="float:left;">
float:left; 左に浮く2
</div>
<div style="float:right;">
float:right; 右に浮く3
</div>
<div style="float:right;">
float:right; 右に浮く4
</div>
</body>
</html>

f:id:liguofeng29:20160203203715g:plain

複数カラムレイアウト

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 複数カラムのレイアウト </title>
   <style type="text/css">
        body{
            margin:0px;
        }
        div#container {
            width: 460px;
            margin:auto;
        }
        div>div {
            border: 1px solid #aaf;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            border-radius: 12px 12px 0px 0px;
            background-color: #ffc;
            padding:5px;
        }
    </style>
</head>
<body>
<div id="container">
<!-- float:left;左に浮く -->
<div style="float:left;width:120px">
<h2>タイトル1</h2>
<ul>
    <li>要素1-1</li>
    <li>要素1-2</li>
    <li>要素1-3</li>
</ul>
</div>
<!-- float:left;左に浮く -->
<div style="float:left;width:200px;">
<h2>タイトル2</h2>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
テスト文字列テスト文字列<br>
</div>
<!-- float:left;左に浮く -->
<div style="float:left;width:140px">
<h2>タイトル3</h2>
<ul>
    <li>要素3-1</li>
    <li>要素3-2</li>
    <li>要素3-3</li>
    <li>要素3-4</li>
</ul>
</div>
</div>
</body>
</html>

f:id:liguofeng29:20160203204741p:plain