Question

DIV+CSS一行三列代码如何写?

Answer 1

此处的注释为去掉换行符的影响
.wrapper
{
width:
100%;
/*
也可以固定宽度
*/
height:
200px;
}
.wrapper
>
div
{
display:
inline-block;
/*
如需支持ie8以下版本，用浮动来做
*/
width:
calc(100%
/
3);
/*
此处运用了一个css3的表达式，将div三等分，ie8及以上可以支持，当然也可以根据需要设置固定值
*/
width:
-webkit-calc(100%
/3);
width:
-moz-calc(100%
/
3);
height:
100%;
}
以上经亲自测过，ie8+、chrome、firefox表现良好。

Answer 2

大概的结构如下：
<div>
<div
class=“left”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div
class=“middle”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div
class=“right”><!-----右边边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
</div>
需要注意：1）同列的这三个盒子，使用float浮动：如，float：left；这样就可以在一行排列顺次排列。
也可以对left盒子使用float：left；，右边的盒子使用float：right；
2）最外边的div盒子的宽度要大于同列的3个盒子总宽度，如果小了，则会被挤下来，不是在一行中显示。