1. 用 標(biāo)準(zhǔn)div+css的方式書寫出以下代碼 :注： ? ?Left顏色為#8fc41f寬度為100px; Main顏色為#fffaba寬度自適應(yīng); Right顏色為#00b7ef寬度100px; Html文檔流必須從Main開始然后才是兩側(cè)----------------------------------------------------以上我只想到了把main和left加到DIV中然后FLOAT：left;ringht的float:ringht；請問這個(gè)思路對嗎？
7 回答
已采納
李曉健
TA貢獻(xiàn)1036條經(jīng)驗(yàn) 獲得超461個(gè)贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>xxx</title>
????<style?type="text/css">
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????html,body{
????????????height:?100%;
????????}
????????.main{
????????????background-color:?#fffaba;
????????????height:?100%;
????????????margin:?0?100px;
????????}
????????.left{
????????????left:?0;
????????????top:?0;
????????????position:?absolute;
????????????background:?#8fc41f;
????????????width:?100px;
????????????height:?100%;
????????}
????????.right{
????????????right:0;
????????????top:?0;
????????????position:?absolute;
????????????background-color:?#00b7ef;
????????????width:?100px;
????????????height:?100%;
????????}
????</style>
</head>
<body>
<div?class="main">12321?32132131?2312312</div>
<div?class="left"></div>
<div?class="right"></div>
</body>
</html>
chen_men
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*
{
padding:0;
margin:0;
font-size: 16px;
}
#container
{
width: 300px;
margin: 0 auto;
position: relative;
}
.left
{
background: #8fc41f;
width: 100px;
position: absolute;
right: 100px;
top: 0;
}
.right
{
background: #00b7ef;
width: 100px;
position: absolute;
right: 0;
top: 0;
}
.main
{
background: red;
margin: 0 200px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div class="left">111</div>
<div class="main">222</div>
<div class="right">333</div>
</div>
</body>
</html>
RenneXV
TA貢獻(xiàn)6條經(jīng)驗(yàn) 獲得超0個(gè)贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>xxx</title>
????<style?type="text/css">
????????*{
????????????padding:?0;
????????????margin:?0;
????????}
????????html,body{
????????????height:?100%;
????????}
????????.demo{
????????????display:?flex;
????????????display:?-webkit-flex;
????????????height:?100%;
????????}
????????.main{
????????????flex:?1;
????????????background-color:?red;
????????}
????????.left,.right{
????????????width:?100px;
????????}
????????.left{
????????????background:?#8fc41f;
????????}
????????.right{
????????????background-color:?#00b7ef;
????????}
????</style>
</head>
<body>
????<div?class="left"></div>
????<div?class="main"></div>
????<div?class="right"></div>
</body>
</html>-
RenneXV..沒看到文檔流..
卡迪亞茲
TA貢獻(xiàn)24條經(jīng)驗(yàn) 獲得超8個(gè)贊
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Document</title>
????<style>
????*{
????????margin:0;
????????padding:0;
????}
????.left{
????????width:?100px;
????????min-height:?300px;
????????position:?absolute;
????????left:?0;
????????background:?#8fc41f;
????}
????.right{
????????width:?100px;
????????min-height:?300px;
????????position:?absolute;
????????right:?0;
????????background:?#00b7ef;
????}
????.main{
????????width:?100%;
????????min-height:?300px;
????????position:?absolute;
????????left:?100px;
????????background:?#fffaba;
????}
????</style>
</head>
<body>
????<div></div>
????<div></div>
????<div></div>
</body>
</html>我是用的3個(gè)都進(jìn)行相對定位來達(dá)到的效果。
添加回答
舉報(bào)
0/150
提交
取消