<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.outer-box{
width: 100%;
/* height: 650px;*/
border: 10px solid black;
margin: 0 auto;
padding: 1.5em;
box-sizing: border-box;
}
.card{
width: 16%;
height: 130px;
border: 5px solid red;
margin: 0 auto;
float: left;/*浮動可以向左也可以向右*/
box-sizing: border-box;/*邊框和內容總共佔百分之二十*/
margin: 1.5em;/*浮動的margin不會重疊*/
background: #8187ff;
/* color:black;*/
}
.empty{
clear: left;
}
.card div{
font-size: 20px;
font-family: cursive;
text-align: center;
height: 100%;
line-height: 120px;
/* display: table-cell;*/
}
</style>
<script type="text/javascript">
function initBox(){
var box= document.getElementById("outbox");
var result="";
for(var i=0;i<16;i++)
{
result+="<div class=\"card\"><div>"+(i+1)+"牀</div></div>";
}
result+="<div class=\"empty\"></div>";
box.innerHTML=result;
}
</script>
</head>
<body onload="initBox()">
<div id="outbox" class="outer-box">
<div class="empty"><!--清除浮動屬性，大盒子沒有高度，仍然會自動包裹所有小盒子的大小-->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--<link type="text/css" href="css/table.css" rel="stylesheet">-->
<style>
.outer-box{
width: 100%;
/* height: 650px;*/
border: 10px solid black;
margin: 0 auto;
padding: 1.5em;
box-sizing: border-box;
}
.card{
width: 16%;
height: 130px;
border: 5px solid red;
margin: 0 auto;
float: left;/*浮動可以向左也可以向右*/
box-sizing: border-box;/*邊框和內容總共佔百分之二十*/
margin: 1.5em;/*浮動的margin不會重疊*/
/* background: #6e81ff;*/
padding: 2px;
}
.card2{
width: 16%;
height: 130px;
border: 5px solid red;
margin: 0 auto;
float: right;/*浮動可以向左也可以向右*/
box-sizing: border-box;/*邊框和內容總共佔百分之二十*/
margin: 1.5em;/*浮動的margin不會重疊*/
/*background: #6e81ff;*/
padding: 2px;
}
.empty{
clear: left;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="card">
<img width="100%" height="100%" src="images/1.jpg">/*圖片的加載*/
</div>
<div class="card2">
<img width="100%" height="100%" src="images/1.jpg">
</div>
<div>
hhahahahhaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="empty">
</div>
</div>
</body>
</html>
