一部の子要素を右側に移動させます。

子divは4つあります。このブロックの一部の子要素を右側に移動させます。

First Text | Third Text 
Second Text | Fourth Text

HTML構造：

<div class="col one">First Text</div> 
<div class="col two">Second Text</div> 
<div class="col three">Third Text</div> 
<div class="col fourth">Fourth Text</div>

私はにできる午前、彼らはこの方法のようになり、モバイルで

First Text | Second Text | Third Text | Fourth Text

：これらは、この方法のようにデスクトップに表示されます複数の方法でこのシナリオを達成してください。しかし、問題は、既存のプロジェクトです。私はHTML構造を変更することが許可されていません。このシナリオはCSSだけで可能ですか（CSSフレックスや他の方法など）？

N：B：divの高さは動的なので、position: absolute;を使用すると適切ではありません。私はjQueryを使ってdivの高さを計算してみましたが、他のdivの配置にはこれらの値を使用しました。しかし、データ、要素などは動的な方法（ng-repeat way of angularjsのようなもの）から来ているので、ページ読み込み後にこれらの値を取得できませんでした。これらの複雑さのために、私は適切なCSSソリューション（ある場合）を探しています。

FIDDLE DEMO

更新：

私は一つのことを言及するのを忘れてしまいました。そのために残念。 2つのdivの間に余分な垂直スペースはありません。

それは次のようにする必要があります：あなたはフレキシボックスを使用することができますので、

は（@Johannesによる）

Updated Fiddle

出典

2016-10-19 user1896653

「高さが動的である」ので、どのように彼らは、モバイルに整列する必要があるでしょうか？ – fcalderan

この '.col { の値を変更すると、あなたのCSSは正常に動作するようです。 float：なし; } 'これに' .col { 幅：50％; float：left; } ' - https://jsfiddle.net/f95mqs8L/4/ – Andrew

2番目のdivは1番目のdivの下に、4番目のdivは3番目のdivの下になければなりません。 – user1896653

はい、あなたが使用することができますorderこれを動作させるには：

body {display: flex;} 
 
.col {width: 25%;} 
 
@media screen and (max-width: 480px) { 
 
    .col {width: 50%;} 
 
    .one {order: 1;} 
 
    .two {order: 3;} 
 
    .three {order: 2;} 
 
    .fourth {order: 4;} 
 
}

<div class="col one">First Text</div> 
 
<div class="col two">Second Text</div> 
 
<div class="col three">Third Text</div> 
 
<div class="col fourth">Fourth Text</div>

出典

2016-10-19 12:58:58

あなたはフレキシボックスでそれを行うことができます。

http://codepen.io/anon/pen/ZpmQYd

あなたは、コンテナとしてフレックスコンテナ定義：追加メディアクエリで

.row { display: flex }

をflex-wrap: wrap;に2行を許可する。

.one { 
    order: 1; 
    } 
    .two { 
    order: 3; 
    } 
    .three { 
    order: 2; 
    } 
    .fourth { 
    order: 4; 
    }

そしてませんが、忘れて：すべての山車を消去

は、その後、あなたは（メディアクエリで）子要素にorder設定を追加します。このよう

出典

2016-10-19 13:04:20 Johannes

は動作します：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Postgraduate students</title> 
    <style type="text/css"> 
     .col { 
     float: left; 
     width: 25%; 
     } 

     @media screen and (max-width: 480px) { 
      .col { 
      width: 50%; 

      } 

     } 
    </style> 
</head> 
<body align = "center"> 

<div class="col one">First Text</div> 
<div class="col two">Second Text</div> 
<div class="col three">Third Text</div> 
<div class="col fourth">Fourth Text</div> 
</body>

出典

2016-10-19 13:15:05 lisarko8077

一部の子要素を右側に移動させます。

答えて

関連する問題