css盒子問題
css中的盒子是一個(gè)大盒子里面套兩個(gè)小盒子，且這兩個(gè)小盒子是左右結(jié)構(gòu)關(guān)系，我應(yīng)該怎么編寫代碼呢？請大神幫忙解決
嘉欣
2016-11-26
6 回答
舉報(bào)
0/150
提交
取消
2016-11-26
<!DOCTYPE html>
<html>
<head>
? ? <title></title>
? ? <style type="text/css">
? ? ? ? #box1{
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? margin-bottom: 30px;
? ? ? ? ? ? border: 2px solid blue;
? ? ? ? ? ? position: relative; ?//代碼1
? ? ? ? }
? ? ? ? #box2{
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 450px;
? ? ? ? ? ? border: 3px solid yellow;
? ? ? ? ? ? margin-left: 10px;
? ? ? ? ? ? padding: 2px;
? ? ? ? }
? ? ? ? #box3{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 450px;
? ? ? ? ? ? margin-left: 220px;
? ? ? ? ? ? border: 3px solid pink;
? ? ? ? ? ? margin-right: 20px;
? ? ? ? ? ? position: absolute; ?//代碼2
? ? ? ? ? ? top: 0; ?//代碼3
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="box1">
? ? ? ? box1
? ? ? ? <div id="box2">box2</div>
? ? ? ? <div id="box3">box3</div>
? ? </div>
</body>
</html>
加3行代碼
2017-02-13
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>邊距</title>
<style type="text/css">
body{width:650px;
??? height:320px;
??? padding:15px;
?border:1px solid red;}
div{
??? width:300px;
??? height:300px;
??? margin:10px;
?border:1px solid red;
??? float:left;
}
#box1{margin-bottom:30px;}
</style>
</head>
<body>
??? <div id="box1">box1</div>
??? <div id="box2">box2</div>??
</body>
</html>
2016-11-26
box2用float:left ? ? box3用float:right
2016-11-26
你可以定義三個(gè)div，一個(gè)父親，兩個(gè)兒子，給id="left"另一個(gè)給id="right",然后可以用絕對定位，父div記得相對定位一下?
2016-11-26
在head里面寫一個(gè)css語句，在css語句下面在寫兩個(gè)分別是左右兩個(gè)語句，然后在html里寫div語句，在div語句里面嵌套兩個(gè)div語句就可以了。
2016-11-26
兩個(gè)小盒子寬度加起來=大盒子的尺寸，全部左浮動(dòng)