| ＨＰやブログでboxを並べると1列に収まらずはみ出てしまうケースがあります。この問題を解決するcss3のプロパティがbox-sizingです 下記の赤ラインから赤ラインの間が作成したHTMLファイルで、スタイル部分は<head></head>内に組み込んでいます。 |
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<style type="text/css">
div#a {
width: 600px;
height: 120px;
border: 2px solid red;
background-color: #fff;
}
div.left {
width: 50%;
height: 100px;
padding: 20px;
border: 10px solid blue;
background-color: #ccc;
float: left;
}
div.right {
width: 50%;
height: 100px;
padding: 20px;
border: 10px solid blue;
background-color: #ccc;
float: left;
}
div#b {
width: 600px;
height: 120px;
border: 2px solid red;
background-color: #fff;
margin-top: 260px;
}
div.left2 {
width: 50%;
height: 120px;
padding: 20px;
border: 10px solid blue;
background-color: #ccc;
float: left;
box-sizing: border-box;
clear: both;
}
div.right2 {
width: 50%;
height: 120px;
padding: 20px;
border: 10px solid blue;
background-color: #ccc;
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="a">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div id="b">
<div class="left2">left2</div>
<div class="right2">right2</div>
</div>
</body>
</html>
＊ Webでの表示 ＊
