三个框水平排列，CSS的最简单的写法是怎么样的?
我自己写的，很长很复杂，请高手帮忙优化：
<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>追问：很遗憾，您是错的，我在线测试了，不行
答案：<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>其他：用float属性就可以了；另外用display:inline-block也可以让对象同行排列，不过好像对浏览器的兼容性不是很好。 一楼正解，float属性 <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> 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>
希望有所帮助。
如果认可，建议采纳二楼。 上一个：那个能告诉我这个代表什么意思 $(".STBD01_STYLE_ALL").css("display","none")
下一个：css 中border: 1px solid rgba(0, 0, 0, 0.1); 是什么意思？
