如何像效果圖一樣兩邊有白色間隙
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二列布局</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc; float:left;}}/*左浮動樣式*/
.right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮動樣式*/
</style>
</head>
<body>
<div class="main">
? ? <div class="left">left</div>
? ? <div class="right">right</div>
</div>
</body>
</html>
要是在中間要間隙只需要將左右兩邊width各減少10px,中間就可以有20px，那兩邊要怎么實現呢？
2018-07-19
樓主可以參考下下面的代碼
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<title>Document</title>
? ?<style type="text/css">
? ? ? ?*{
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?padding: 0;
? ? ? ?}
? ? ? ?.main{
? ? ? ? ? ?width:1500px;
? ? ? ? ? ?height:auto;
? ? ? ? ? ?margin:0 auto;
? ? ? ?}
? ? ? ?.left{
? ? ? ? ? ?width: 29%;
? ? ? ? ? ?height:400px;
? ? ? ? ? ?background: violet;
? ? ? ? ? ?float: left;
? ? ? ?}
? ? ? ?.right{
? ? ? ? ? ?width: 69%;
? ? ? ? ? ?height:400px;
? ? ? ? ? ?background: blue;
? ? ? ? ? ?float:right;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div class="main">
? ? ? ?<div class="left"></div>
? ? ? ?<div class="right"></div>
? ?</div>
</body>
</html>
2018-07-19
多謝你這么認真幫我解答，但我剛剛在DW中還是試過不行，跑偏了，但是我突然想到一個辦法，終于實現了，就是把左右兩邊寬度各減20PX再添加margin-left和margin-right就可以了。修改后是
.left{ width:280px; height:600px; background:#ccc; float:left;margin-left:10px}/*左浮動樣式*/
.right{ width:640px; height:600px; background:#FCC; float:right;margin-right:10px}/*右浮動樣式*
2018-07-18
手動設定main中width的寬度為像素，但這種方法不具備窗口自適應，一旦瀏覽器窗口縮小到小于該像素，窗口左右會被填滿；
.main{ width:800px; height:600px; margin:0 auto}
還有一種方法可以自適應窗口，修改doby中margin值為0 10px，這樣左右就各有了10像素的留白。
body{ margin:0 10px; padding:0; font-size:30px; font-weight:bold}
2018-07-18
只需要讓左邊div的寬度+右邊div的寬度 < main這個div的寬度, 且 左邊div左浮動,右邊div右浮動就可以有空隙了