CSS 쿼리를 사용하여 요소 정렬

매우 간단한 웹 사이트가 있는데, 화면의 크기를 조정할 때 요소를 올바르게 정렬하도록 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>

그리고 queries.css

/*-----------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

Demo fiddle 이미지와 함께 작업 바이올린을 제공하십시오. –

부트 스트랩 3을 체크 아웃해야합니다. 필요한 모든 것이 있습니다. – Imaginaroom

귀하의 레이아웃에 flexbox를 사용하려면 order 속성을 사용하여 블록을 재배치하십시오. Flexbox를 사용하지 않는 경우, 정말로해야합니다. 당신은 이미지의 로컬 링크를 제공하며 자세한 내용에 대한 질문을 수정 한대로

<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 옆에 Div 6을 넣고 inline-block으로 지정합니다.

출처

2016-10-21 08:21:24 KWeiss

하지만 어떻게 코드를 살펴볼 수 있습니까? Div를 쿼리로 옮길 수 있습니까? – TacoCat

CSS 쿼리를 사용하여 요소 정렬

답변

관련 문제