DIV+CSS一行三列代码如何写?
展开全部
此处的注释为去掉换行符的影响
.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表现良好。
.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表现良好。
展开全部
大概的结构如下:
<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个盒子总宽度,如果小了,则会被挤下来,不是在一行中显示。
<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个盒子总宽度,如果小了,则会被挤下来,不是在一行中显示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询