首页 > 试题广场 >

针对如下 DOM 结构，编写 CSS ，实现三栏水平布局，其

[问答题]

针对如下 DOM 结构，编写 CSS ，实现三栏水平布局，其中 left 、 right 分别位于左右两边， left 宽度为 200px ， right 宽度为 300px ， main 处在中间，宽度自适应。要求：允许增加额外 DOM 节点，但不能修改现有节点顺序。

<divclass="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

Rosevil

 .container {
    display:flex;
}
.main{
    flex: 1;
    background-color:#eee;
}
.left{
    flex-basis:200PX;
    order:-1;
    background-color: lightblue;
}
.right {
    flex-basis: 300px;
    background-color:lightblue;
}

发表于 2017-08-21 15:51:00 回复(1)

一只大恐龙

圣杯布局

双飞翼布局

绝对定位布局

flex布局

发表于 2017-08-20 17:34:57 回复(4)

昔阳

<style>
*{margin:0px;}
</style>
<div class="container">
<div class="main" style="width:auto;margin-left:200px;margin-right:300px;">main</div>
<div class="left" style="width:200px;position:absolute;top:0px;left:0px;">left</div>
<div class="right" style="width:300px;position:absolute;top:0px;right:0px;">right</div>
</div>

发表于 2017-03-07 15:55:46 回复(1)

最最可爱的💕

.main{
width:100%;
padding:0 300px 0 200px;
}
.left{
width:200px;
position:absolute;
left:0;
top: 0;
}
.right{
width:300px;
position:absolute;
right:0;
top: 0;
}

发表于 2017-10-23 11:34:51 回复(0)

子木311

.container {

overflow:hidden;

}

.left{

float: left;

width: 200px;

background: pink;

}

.right{

float: right;

width: 300px;

background: green;

}

.main{

display: inline-block;

}

</style>

发表于 2017-08-29 21:21:29 回复(0)

背题背题背题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> html,body{
            width: 100%;
        }
        .container{
            position: relative;
            height: 100px;
            width: 100%;
        }
       .main{
           background: burlywood;
           margin: 0px 300px 0 200px;

       }
        .left{
            position: absolute;
            width: 200px;
            left: 0;
            top:0;
            background:aqua;
        }
        .right{
            position: absolute;
            width: 300px;
            right: 0;
            top:0;
            background: greenyellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

发表于 2017-08-27 18:48:55 回复(0)

寂寞的刘老头

<!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>
/*习惯性的CSS reset*/
body,html{
    height:100%;
    padding: 0;
    margin: 0
}
/*父元素body空出左右栏位*/
body {
    padding-left: 200px;
    padding-right: 300px;
}
/*左边元素更改*/
.left {
	background: green;
    width: 200px;
    float: left;
	margin-left: -100%;
	position: relative;
	left: -200px;

}

/*中间部分*/
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
/*右边元素定义*/
.right {
    background: red;
    width: 300px;
    height: 100%;
    float: left;
    margin-left: -300px;
    position: relative;
	right:-300px;
}

</style>

</head>

<body>


<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

</body>
</html>

发表于 2017-08-27 14:14:07 回复(0)

牛客322号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> *{ margin:0;
        }
        .left{ width:200px; position:absolute; background:red; left:0;
        }
        .right{ width:300px; position:absolute; background:yellow; right:0;
        }
        .main{ width:auto; left:200px; right:300px; background:grey; position:absolute;
        }
    </style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>