1

CSS を使用して次のレイアウトを実現しようとしています。各数字は、同じ幅のコンテンツのブロックです。

モバイル ビュー:

1
2
3
4
5
6
7
8

デスクトップ ビュー:

1 | 2
-----
4 | 3
-----
5 | 6
-----
8 | 7

デスクトップ レイアウトでは 3-4 と 7-8 が逆になっていることに注意してください。

3-4 と 7-8 は意味的にリンクされていないため、これらを親 HTML 要素と結合したくありません (したがって、display:table レイアウトはオプションではない可能性があります)。

デスクトップ ビューでは、要素 1 は要素 2 と同じ高さである必要があり、3 は 4 と同じ高さである必要がありますが、高さは事前にわからないため、JavaScript を使用したくありません (したがって、フロートはそのまま使用されます)。 CSS calc を使用する方法がない限り、異なる高さ)。

では、1 ～ 8 がすべて同じ親 div のセクション要素であると仮定すると、JavaScript なしでこれをどのように達成できるでしょうか?

解決策があるかどうかはわかりませんが、これは CSS がサポートできるはずのものだと思います。そのため、回答にはドラフトまたはほとんどサポートされていない CSS が含まれる可能性があります。

4

3 に答える 3

1

ここのように 3、4、7、8 をフロートします: http://jsfiddle.net/KH584/

.three, .four, .seven, .eight{
    float:right;
}
于 2013-06-25T13:52:16.110 に答える
0

シマノンの答えとその後の私のコメントによると、フレックスボックス、ラッピング、相対位置の組み合わせを使用することができました。

CSS:

ul {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
  outline: 1px solid red;
  width: 50%;
}

li:nth-child(4n) {
  position: relative;
  left: -50%;
}

li:nth-child(4n-1) {
  position: relative;
  left: 50%;
}

HTML:

<ul>
  <li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>2</li>
  <li>3</li>
  <li>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>5</li>
  <li>6</li>
  <li>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>8</li>
</ul>

http://codepen.io/penx/pen/fnrJE

于 2013-06-25T19:42:38.820 に答える