div是塊級元素，所以在排列的時候會縱向排列，如果想解決這個問題的話，可以給div加上float：left/right樣式，這樣div就會橫向排列（無縫排列）
.div-one{
background-color:red;
/*無縫排列*/
float: left;
}
如果說想讓div橫向排列並且div之間有縫隙，那么可以將div變成行內塊（display：inline-block）即可。
.div-one{
background-color:red;
/*有縫排列*/
display: inline-block;
}
缺點：拖動瀏覽器寬度的時候，因為寬度變小，可能會有div被擠到下面去，所以建議使用float，給div設置百分比寬度（這里就是百分比布局了.........）
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;}
div{
width:200px;
height:200px;
}
.div-one{
background-color:red;
/*無縫排列*/
float: left;
/*有縫排列*/
/*display: inline-block;*/
}
.div-two{
background-color:blue;
float: left;
/*display: inline-block;*/
}
.div-three{
background-color:yellow;
float: left;
/*display: inline-block;*/
}
</style>
</head>
<body>
<div class="div-one"></div>
<div class="div-two"></div>
<div class="div-three"></div>
</body>
</html>
-----------------------------------------------------------------------------
轉載請標明出處