CSSクエリを使用して要素を配置する

非常にシンプルなWebサイトがあります。画面のサイズを変更するときに要素を正しく配置するためのCSSクエリを作成しようとしています。CSSクエリを使用して要素を配置する

私が持っているレイアウトと達成したいことを見てみることができます。

そして、これは私が（問題がアップ＃6を移動さ）を取得したい結果である：ここでは

はindex.htmlにある：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css"> 
    <link rel="stylesheet" type="text/css" href="css/grid.css"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/queries.css"> 
    <title>Document</title> 
</head> 
<body> 
    <header> 
     <div class="row"> 
      <img src="img/header.png" alt="Voltaren" class="header_image"> 
     </div> 
    </header> 
    <section class="middle"> 
     <div class="row_2"> 
      <div class="col span-1-of-3 middle_1"> 
       <img src="img/Middle_1.png" alt=""> 
      </div> 
      <div class="col span-1-of-3 middle_2"> 
       <img src="img/Middle_2.png" alt=""> 
      </div> 
      <div class="col span-1-of-3"> 
       <img src="img/Middle_3.png" alt=""> 
      </div> 
     </div> 
    </section> 
    <section class="bottom"> 
     <div class="row_2"> 
      <div class="col span-2-of-3 bot_img"> 
       <img src="img/Bottom_1.png" alt=""> 
      </div> 

      <div class="col span-1-of-3 "> 
       <img src="img/Bottom_2.png" alt=""> 
      </div> 
     </div> 
    </section> 
    <footer> 
     <div class="row_2"> 
      <img src="img/Footer.png" alt=""> 
     </div> 
    </footer> 
</body> 
</html>

クエリとは？

/*-----------Small tablet to big tablet from 768 px - 1023px---------------*/ 


/*-----------Average phones from 481 px - 767px---------------*/ 
@media only screen and (max-width: 850px){ 
    .middle{ 
     padding: 0 2%; 
    } 

} 

/*-----------Average phones from 481 px - 767px---------------*/ 
@media only screen and (max-width: 767px){ 
    .middle_1{ 
     width: 49%; 
    } 
    .middle_1 img{ 
     width: 95%; 
    } 

    .middle_2{ 
     width: 49%; 
     margin-left: 2%; 
    } 
    .middle_2 img{ 
     width: 95%; 
    } 

}

出典

2016-10-21 TacoCat

画像のローカルリンクを指定しているので、実際の画像を入力してください。また、詳細を編集してください。 –

ブートストラップ3をチェックアウトする必要があります。 – Imaginaroom

あなたのレイアウトにフレックスボックスを使用する場合は、orderプロパティを使用してブロックを再配置することができます。フレックスボックスを使用していない場合は、本当に必要です。 Demo fiddle

<div class="container"> 
    <div class="block block-1 width-100">1</div> 
    <div class="block block-2 width-33">2</div> 
    <div class="block block-3 width-33">3</div> 
    <div class="block block-4 width-33">4</div> 
    <div class="block block-5 width-66">5</div> 
    <div class="block block-6 width-33">6</div> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
} 

.block { 
    height: 200px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 60px; 
} 

.block-1 { 
    background: green; 
} 
.block-2 { 
    background: red; 
} 
.block-3 { 
    background: yellow; 
} 
.block-4 { 
    background: blue; 
} 
.block-5 { 
    background: purple; 
} 

.block-6 { 
    background: brown; 
} 

.width-100 { 
    width: 100%; 
} 
.width-66 { 
    width: 66%; 
} 
.width-33 { 
    width: 33%; 
} 

@media all and (max-width: 560px) { 
    .width-33 { 
    width: 50%; 
    } 
    .block-1 { 
    order: 1; 
    } 
    .block-2 { 
    order: 2; 
    } 
    .block-3 { 
    order: 3; 
    } 
    .block-4 { 
    order: 4; 
    } 
    .block-5 { 
    order: 6; 
    width: 100%; 
    } 
    .block-6 { 
    order: 5; 
    } 
}

出典

2016-10-21 08:30:13

をDiv 4からDiv 5にコード内で移動します。それにスタイルfloat: rightをつけてください。小規模なビューでは、float: rightを削除し、をDiv 4の隣にinline-blockとして配置します。

出典

2016-10-21 08:21:24 KWeiss

しかし、それはどのようにコードを調べますか？ Divをクエリーで移動できますか？ – TacoCat

CSSクエリを使用して要素を配置する

答えて

関連する問題