三个框水平排列，CSS的最简单的写法是怎么样的?
我自己写的，很长很复杂，请高手帮忙优化：<head><style>.aaa{width:200px;hight:200px;background-color:gray;b...
我自己写的，很长很复杂，请高手帮忙优化：
<head>
<style>
.aaa{width:200px;hight:200px; background-color:gray;
border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001;
position: relative;
left: 20px;
top: 20px;}
.zhong{
width:50px; height:50px; background:#00e0fe;
position: relative;
left:70px;
top:-30px}
.you{ width:50px; height:50px; background:#fff000;
position: relative;
left:120px;
top:-80px}
</style>
</head>
<body>
<div class="aaa">
<div class="zuo">左</div>
<div class="zhong">中</div>
<div class="you">右</div></div>
</body>
大师们，写一下代码吧
我实在是写不出来了 展开
<head>
<style>
.aaa{width:200px;hight:200px; background-color:gray;
border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001;
position: relative;
left: 20px;
top: 20px;}
.zhong{
width:50px; height:50px; background:#00e0fe;
position: relative;
left:70px;
top:-30px}
.you{ width:50px; height:50px; background:#fff000;
position: relative;
left:120px;
top:-80px}
</style>
</head>
<body>
<div class="aaa">
<div class="zuo">左</div>
<div class="zhong">中</div>
<div class="you">右</div></div>
</body>
大师们，写一下代码吧
我实在是写不出来了 展开
6个回答
展开全部
wixiaoduan 的解答其实是基本正确的。只是TA在最后一个定义中漏了 float:left
即应为：
<style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px; border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001; float:left;}
.zhong{
width:50px; height:50px; background:#00e0fe; float:left;}
.you{ width:50px; height:50px; background:#fff000; float:left;}
</style>
以上是对你的代码的最简单的改写。
另外，如果你三个框除位置之外其他属性均相同（如果背景色也相同），更简单的代码是用定义单个框（比如：box）代替以上三个定义（zuo, zhong, you）:
即：
<head>
<style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px; border:solid 2px red;}
.box{
width:50px; height:50px; background:#00e001; float:left;}
</style>
</head>
<body>
<div class="aaa">
<div class="box">左</div>
<div class="box">中</div>
<div class="box">右</div></div>
</body>
希望有所帮助。
如果认可，建议采纳二楼。
即应为：
<style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px; border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001; float:left;}
.zhong{
width:50px; height:50px; background:#00e0fe; float:left;}
.you{ width:50px; height:50px; background:#fff000; float:left;}
</style>
以上是对你的代码的最简单的改写。
另外，如果你三个框除位置之外其他属性均相同（如果背景色也相同），更简单的代码是用定义单个框（比如：box）代替以上三个定义（zuo, zhong, you）:
即：
<head>
<style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px; border:solid 2px red;}
.box{
width:50px; height:50px; background:#00e001; float:left;}
</style>
</head>
<body>
<div class="aaa">
<div class="box">左</div>
<div class="box">中</div>
<div class="box">右</div></div>
</body>
希望有所帮助。
如果认可，建议采纳二楼。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="wp">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.wp{
width: 298px;
border: 1px yellow solid;
overflow: hidden;
}
.wp div{
outline: 1px red solid;
width: 80px;
height: 80px;
float: left;
}
</style>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.leftcol,.rightcol{width:300px;height:400px;}
.main{height:400px;background-color:blue;}
.leftcol{background-color:green;}
.rightcol{background-color:yellow;}
.content{width:900px;margin:10px auto;}
.cl{clear:both;}
</style>
<div class="content">
<div class="fl leftcol">左边的内容</div>
<div class="fr rightcol">右边的内容</div>
<div class="main">主要内容</div>
<div class="cl"></div>
</div>
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.leftcol,.rightcol{width:300px;height:400px;}
.main{height:400px;background-color:blue;}
.leftcol{background-color:green;}
.rightcol{background-color:yellow;}
.content{width:900px;margin:10px auto;}
.cl{clear:both;}
</style>
<div class="content">
<div class="fl leftcol">左边的内容</div>
<div class="fr rightcol">右边的内容</div>
<div class="main">主要内容</div>
<div class="cl"></div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px;
border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001;
float:left;}
.zhong{
width:50px; height:50px; background:#00e0fe;
float:left}
.you{ width:50px; height:50px; background:#fff000;
}
</style>
.aaa{width:200px;hight:200px; background-color:gray;
padding:20px;
border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001;
float:left;}
.zhong{
width:50px; height:50px; background:#00e0fe;
float:left}
.you{ width:50px; height:50px; background:#fff000;
}
</style>
追问
很遗憾，您是错的，我在线测试了，不行
追答
.aaa{width:200px;
padding:20px;
hight:200px; background-color:gray;
border:solid 2px red;}
.zuo{
width:50px; height:50px; background:#00e001;
float:left;}
.zhong{
width:50px; height:50px; background:#00e0fe;
float:left}
.you{ width:50px; height:50px; background:#fff000;
float:left
}
左
中
右
原来最后一个没加float只是为了区别,不能总捡现成的不是,自己动手
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用float属性就可以了；另外用display:inline-block也可以让对象同行排列，不过好像对浏览器的兼容性不是很好。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
