3

私はこれを行うために多くの時間を費やしました:

ここに画像の説明を入力

黒い四角はdiv(a である必要はありませんdiv)containerです。

他のすべての四角形はdivs またはspans またはその他のものです (それは問題ではありません)

プレーンな HTML、CSS、および Javascript を使用してこれを達成する方法を教えてもらえますか?

*すべての正方形を作成しようとしdivましたが、ある行では高さが異なる正方形であるため、次の行には「パーツ」が欠落しており、この問題をマージンで管理しようとしましたが、うまくいきませんでした。それほど難しいことではないと確信しています。

4

3 に答える 3

1

使用する必要があるのは、CSS3 プロパティcolumn-countです。あらゆる種類のコンテナ内の列数を表示します。これを写真アルバムとして使おうとしたら

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

-webkit-column-count: 3;
-webkit-column-gap:   0px;
-moz-column-count:    3;
-moz-column-gap:      0px;
column-count:         3;
column-gap:           0px;

}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

#photos はコンテナです。 記事http://css-tricks.com/seamless-responsive-photo-grid/

の Chris Coyier の功績

于 2012-12-27T00:56:45.557 に答える
0

表示するコードがないため、コードを実行しません...しかし、これに役立つ可能性があるものは教えていただけます。

これを実現するのに役立ついくつかの css パラメータを次に示します。

  • position

  • margin

  • display

  • float

この中のすべての正方形は である必要がありDIV、これらの良い組み合わせがうまくいくはずです!

于 2012-12-27T00:41:19.377 に答える
0

絶対配置を試してください:

<style>
.rect {
    position: absolute;
    width: 100px ;
    height: 200px;
}

</style>
<div class="rect" style="top:0;left:0;border:3px solid blue"></div>
<div class="rect" style="top:206px;left:0;border:3px solid green"></div>
<div class="rect" style="top:0;left:106px;border:3px solid red; height: 300px"></div>
于 2012-12-27T00:34:01.223 に答える