cssの複数列
24893 ワード
cssマルチカラムは、新聞のようにマルチカラムテキストをより容易に定義することができます.
属性は次のとおりです.
1、column-count規定要素が区切られるべき列数
適用:table以外の非置換ブロックレベル要素、table cells、inline-block要素
auto:ブラウザに基づいて計算し、integer:値が0より大きい
2、column-gapは列と列の間の間隔の大きさを規定する
3、column-ruleオブジェクト列と列の境界線、複合属性の設定または取得
color-rule-color/color-rule-style/color-rule-width
4、column-fillオブジェクトのすべての列の高さが統一されているかどうかを設定または取得する
auto列高さ適応内容
balanceのすべての列の高さは、その中で最も高い列で統一されています.
5、column-spanオブジェクト要素がすべての列にまたがるかどうかを設定または取得する
Noneは列にまたがらずallはすべての列にまたがる
6、column-widthオブジェクトの各列の幅を設定または取得する
7、columnsオブジェクトの列数と各列の幅を設定または取得する複合属性
||
複数列は滝の流れに使われていてきれいな効果が得られます
属性は次のとおりです.
1、column-count規定要素が区切られるべき列数
適用:table以外の非置換ブロックレベル要素、table cells、inline-block要素
auto:ブラウザに基づいて計算し、integer:値が0より大きい
2、column-gapは列と列の間の間隔の大きさを規定する
3、column-ruleオブジェクト列と列の境界線、複合属性の設定または取得
color-rule-color/color-rule-style/color-rule-width
4、column-fillオブジェクトのすべての列の高さが統一されているかどうかを設定または取得する
auto列高さ適応内容
balanceのすべての列の高さは、その中で最も高い列で統一されています.
5、column-spanオブジェクト要素がすべての列にまたがるかどうかを設定または取得する
Noneは列にまたがらずallはすべての列にまたがる
6、column-widthオブジェクトの各列の幅を設定または取得する
7、columnsオブジェクトの列数と各列の幅を設定または取得する複合属性
||
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
div{
column-count:4;
column-gap:30px;
column-rule:2px solid green;
column-span: all;
columns: 50px 3;
}
style>
head>
<body>
<h2> h2>
<div> div>
body>
html>複数列は滝の流れに使われていてきれいな効果が得られます
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-size:500px 500px;
background:url(../MYPROJECT/imges/a.png),url(../MYPROJECT/imges/bg.gif);
background-color: hsl(0, 20%, 17%);
}
#items{
width: 90%;
margin: 10px 5%;
column-count: 5;
column-gap: 20px;
column-fill:auto;
}
img{
display: block;
width:100%;
}
#items div{
border:2px solid pink;
margin-bottom: 10px;
padding:5px;
break-inside: avoid;
}
p{
font-size: 18px;
color:#a77869;
text-align: center;
font-weight: bold;
padding:10px 0;
}
style>
head>
<body>
<div id="items">
<div>
<img src="../MyProject/imges/1.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/2.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/3.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/4.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/5.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/6.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/7.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/8.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/9.jpg">
<p>
p>
div>
<div>
<img src="../MyProject/imges/10.jpg">
<p>
p>
div>
div>
body>
html>