1

下のリンクに示されているような複数列のCSSレイアウトをレンダリングしようとしています。

http://i.imgur.com/Fhdyi.png

これが私が探している構文の種類です...

<div class="container">
  <div id="1">#1</div>
  <div id="2">#2</div>
  <div id="3">#3</div>
     <!-- and so on... -->
</div>

このように表示するために、これらの番号付きDIVにどのようなCSSプロパティを適用しようとしていますか？DIVの高さは可変ですが、幅は固定されています。

どうもありがとう！

4

3 に答える 3

1

列の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>
于 2012-10-24T17:56:03.660 に答える
0

これはテストされていませんが、あなたが探している次のようなものである可能性があります。

#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;
}
于 2012-10-24T17:17:24.900 に答える
0

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>

それに関する問題は、アイテムがたくさんある場合、最初の3つのアイテムではなく、各列の最初の列が上部に表示されることです。

jQuery組積造プラグインは、この種のレイアウトにははるかに優れたオプションです：http: //masonry.desandro.com/

「バニラ組積造」と呼ばれるプレーンなJSバージョンもあります http://vanilla-masonry.desandro.com/

そうすれば、最初のアイテムが一番上に表示され、順番に見栄えが良くなります。

于 2012-10-24T17:06:52.530 に答える