本文摘自PHP中文网,作者藏色散人,侵删。
css box-lines属性用于规定如果列超出了父框中的空间,是否要换行显示,其语法是box-lines: single|multiple。css box-lines属性怎么用?
作用:规定如果列超出了父框中的空间,是否要换行显示。
语法:
1 | box-lines: single|multiple;
|
说明:single所有子元素会被放置在单独的行或列中。(无法匹配的元素会被视为溢出)。multiple允许框扩展为多行,以容纳其所有子元素。
注释:默认地,水平框会在单独的行中排列其子元素,而垂直框会在单独的列中排列其子元素。
css box-lines属性使用示例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html>
<head>
<style>
.container
{
width:300px;
border:1px dotted black;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-lines:multiple;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
.box
{
width:100px;
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
box-flex: 1.0;
}
</style>
</head>
<body>
<div class = "container" >
<div class = "box" >11111111111</div>
<div class = "box" >22222222222</div>
<div class = "box" >33333333333</div>
<div class = "box" >44444444444</div>
</div>
<p><b>注释:</b>目前没有浏览器支持 box-lines 属性。</p>
</body>
</html>
|
效果输出:
以上就是css box-lines属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么设置背景图片的透明度
盒模型与bfc的深入讲解
css怎么隐藏table
css怎么去除table的间隙
css如何实现渐渐消失
css如何实现阴影效果
css的四种引入方式分别是什么
css如何设置元素位置不变
css声明语句总是以什么结束
css怎么设置文字透明效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css box-lines属性怎么用