3

変更できない次のマークアップがあります。<div>ラッピングコンテナにのみ追加できます。

<div class="container">
   <div class="box" id="box1">1</div>
   <div class="box" id="box2">2</div>
   <div class="box" id="box3">3</div>
   <div class="box" id="box4">4</div>
   <div class="box" id="box5">5</div>
   <div class="box" id="box6">6</div>
</div>

次の図のように sを積み重ねることは可能<div>ですか?

+------+--------+--------+
|   1  |    3   |    5   |
+------+--------+--------+
|      |        |        |
|   2  |    4   |    6   |
|      |        |        |
+------+--------+--------+
4

3 に答える 3

3

個別のポジショニング

この 6 つの列に対してのみこのレイアウトを作成する必要がある場合は、それらを個別に配置するだけでid済み<div>ます#。

拡張不可能なソリューション [デモ]

このソリューションは 6 列のレイアウトで機能しますが、それを拡張してさらに列を追加する場合は、CSS に.box:nth-child(8) {left: 150px;}.

.container {
   position: relative;
}
.box {
   width: 50px;
   height: 50px;
   float: left;
}
.box:nth-child(2n) {
   position: absolute;
   top: 50px;
}
.box:nth-child(2) {left: 0px;}
.box:nth-child(4) {left: 50px;}
.box:nth-child(6) {left: 100px;}

柔軟性の向上 [デモ]

Itayが述べたように、プロパティを使用するとこのソリューションを改善できるtransformため、次のように CSS を変更できます。

.box:nth-child(4) {transform: translate(100%);}
.box:nth-child(6) {transform: translate(200%);}

topプロパティを手動で変更する必要があります。また、必要に応じて、-webkit-またはのようなベンダー プレフィックスを使用することを忘れないでください。-ms-

拡張可能なソリューション [デモ]

このソリューションも CSS3nth-child(n)セレクターを使用しますが、ここでは相対的な配置とmargin-leftプロパティのトリックを使用します。このソリューションのソース コードは非常にコンパクトで読みやすく、拡張可能であるため、.es にさらにboxes を追加する場合、CSS セレクターを追加する必要はありませんcontainer。HTML に新しい行を追加するだけで、チャームとして機能します。 .

.box {
   width: 50px;
   height: 50px;
   float: left;
   position: relative;
}
.box:nth-child(2n) {
   top: 50px;
   margin-left: -50px;
}

柔軟性の向上 [デモ]

transformプロパティを使用して、このソリューションも改善できることを忘れないでください。

.box:nth-child(2n) {
   transform: translate(0, 100%);
   margin-left: -50px;
}

margin-leftただし、手動でプロパティを設定する必要があります。CSS で動的に変更する方法が見つからない場合は、JavaScript/jQuery を使用できます。

CSS3 列

CSS3 にはこれが新機能として含まれているため、カスタム列を簡単に作成できます。詳細については、この記事を参照してください。また、Itay's answerも参照してください。

于 2013-09-28T18:55:34.993 に答える
2

代替案 #1 - CSS 列

最も簡単な解決策は、CSS3 列を使用することです。

jsFiddle デモ

.container { 
   -webkit-columns: 3;
      -moz-columns: 3;
           columns: 3;
}

代替案 #2 - CSS 変換

CSS 変換の使用は依然として非常に柔軟ですが、CSS 列よりも多くのブラウザーをサポートしています。

jsFiddle デモ

.box:nth-child(n+2) {
    position: absolute;
    left: 0;
}
.box:nth-child(2n) {
    top: 100%;
}
.box:nth-child(3), .box:nth-child(4) {
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
}
.box:nth-child(5), .box:nth-child(6) {
    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
}
于 2013-09-28T18:55:23.027 に答える
0

私が正しく理解している場合は、box1 と box2 を 1 つの div にラップしてから、box3 と box4 に対しても同じことを行い、box5 と box6 に対しても同じことを行い、float left をこれらのラッピング div に設定します。

<div class="container">
  <div style="float:left">
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
  <div>
  <div style="float:left">
    <div class="box" id="box3">3</div>
    <div class="box" id="box4">4</div>
  </div>
  <div style="float:left">
    <div class="box" id="box5">5</div>
    <div class="box" id="box6">6</div>
  </div>
</div>
于 2013-09-28T18:50:59.927 に答える