前端大本营

HTML5,CSS3,Responsive,资料站

column-count 说明

指为内容指定列数的时候使用。<规定列数。> 列宽的值必须大于0。

属性值

auto (默认值) 数值 具体的数量指定
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>column - count</title>
<style>
div.prefix_sample {
width: 600px;
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-count
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 内容布局, 列宽与列数 | column-count 列数指定 —— CSS3 参考 内容布局已关闭评论

column-width 说明

column-width 属性, 指为内容指定列宽的时候使用。<规定列的宽度。> 列宽的值必须大于0。

属性值

auto (默认值) 数值 具体的长度指定
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-width </title>
<style>
div.prefix_sample {
width: 600px;
-moz-column-width: 290px;
-webkit-column-width: 290px;
-o-column-width: 290px;
-ms-column-width: 290px;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-width
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | column-width 列宽指定 —— CSS3 参考 内容布局已关闭评论

columns 说明

columns 属性, 指为内容指定列数和列宽的时候使用。<规定列的宽度和列数。> 列宽也可以使用column-width, 列数可以使用column-count指定。

属性值

column-width 适当的数值指定列宽(默认值为auto) column-count 适当的数值指定列数(默认值为auto)
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>columns</title>
<style>
div.prefix_sample {
width: 600px;
-moz-columns: 250px auto;
-webkit-columns: 250px auto;
-o-columns: 250px auto;
-ms-columns: 250px auto;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  columns
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | columns 列数与列宽指定 —— CSS3 参考 内容布局已关闭评论

box-lines 说明

box-lines属性, 指box元素复数行或复数列指定时使用。<规定允许 div 扩展为多行。> 默认值为single。 水平方向的box元素,所有的子要素一行,垂直方向时,所有子元素一列。 值为multiple时,box元素内为了容下所有的子要素,变为复数行

属性值

single 水平方向的box元素,所有的子要素一行,垂直方向时,所有子元素一列。 (默认值) <所有子元素会被放置在单独的行或列中。(无法匹配的元素会被视为溢出)。> multiple box元素内为了容下所有的子要素,变为复数行<允许框扩展为多行,以容纳其所有子元素。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-lines </title>
<style>
div.prefix_sample1 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-lines:single;
-webkit-box-lines:single;
-o-box-lines:single;
-ms-box-lines:single;
width:300px;
}

div.prefix_sample2 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-moz-box-lines:multiple;
-webkit-box-lines:multiple;
-o-box-lines:multiple;
-ms-box-lines:multiple;
width:300px;
}

div.prefix_sample3 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-lines:single;
-webkit-box-lines:single;
-o-box-lines:single;
-ms-box-lines:single;
width:300px;
}

div.prefix_sample4 {
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-moz-box-lines:multiple;
-webkit-box-lines:multiple;
-o-box-lines:multiple;
-ms-box-lines:multiple;
width:300px;
}

div.aka {
background-color:red;
width:150px;
}
div.midori {
background-color:green;
width:150px;
}
div.ao {
background-color:blue;
width:150px;
}
</style>

</head>

<body>
<h4>box-lines:single;</h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-lines:multiple;</h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-lines:single;</h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-lines:multiple;</h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>
</body>
</html>
实例图  box-lines
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-lines box元素复数行(列)指定 —— CSS3 参考 框布局已关闭评论