[英]Multi-Column like CSS layout
我正在寻找一种多列CSS布局,如下面的链接中所示。
这是我要寻找的语法...
<div class="container">
<div id="1">#1</div>
<div id="2">#2</div>
<div id="3">#3</div>
<!-- and so on... -->
</div>
我希望将哪些CSS属性应用于这些编号的DIV,以使其显示为此类? DIV的高度是可变的,但宽度是固定的。
非常感谢!
分隔列中的div怎么样? 像这样:
.container #col1,#col2,#col3,#col4{
float:left;
}
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{
width:150px;
background:#000;
margin:0 20px 10px 0;
padding:10px;
color:#fff;
}
<div class="container">
<div id="col1">
<div id="div1">#1</div>
<div id="div2">#2</div>
</div>
<div id="col2">
<div id="div3">#3</div>
</div>
<div id="col3">
<div id="div4">#4</div>
<div id="div5">#5</div>
<div id="div6">#6</div>
</div>
<div id="col4">
<div id="div7">#7</div>
</div>
</div>
仅CSS和CSS3都无法做到这一点。
要回答您发布的问题,请举一个例子: http : //sickdesigner.com/masonry-css-getting-awesome-with-css3/
div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }
div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }
<div>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
<a href="#">Whatever stuff you want to put in here.</a>
...and so on and so forth ad nauseum.
</div>
这样做的问题是,如果您有很多项目,那么您会在顶部看到每列的第一行,而不是前三项。
jQuery石工插件是这种布局的更好选择: http : //masonry.desandro.com/
还有一个普通的JS版本,称为“香草砌体” http://vanilla-masonry.desandro.com/
这样,您的第一个项目就位于顶部,顺序看起来更好。
这未经测试,但是您可能正在寻找这样的东西:
#1{
height:150px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#2{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#3{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:both;
}
#4{
height:50px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#5{
height:100px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#6{
height:200px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
float:left;
}
#7{
height:500px;
width:200px;
border: 1px, solid, black;
background-color:black;
color:white;
clear:left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.