필자의 웹 사이트에는 와이드 스크린 모니터에서만 잘 보이는 몇 페이지가 있습니다. 다음과 같은 내용 :민첩한 레이아웃을 만드는 방법은 무엇입니까?
|========================|
| H E A D E R |
|========================|
|Block1 | B I G |
|-------| D A T A |
|Block2 | B L O C K |
|========================|
| F O O T E R |
|========================|
작은 디스플레이를 사용하는 사람들에게 이는 그리 친숙하지 않습니다.
해결 방법이 몇 가지 있습니다.
옵션 A: 허용 사람들은이 페이지의 참조하는 방법을 구성하려면 다음 내용이나 구조 조정의 일부를 제거는 일반적으로 좁은 표시
|===============|
| H E A D E R |
|===============|
|Block1 | Block2|
|---------------|
| B I G |
| D A T A |
| B L O C K |
|===============|
| F O O T E R |
|===============|
옵션 B 표시 한 것으로 : 전체 와이드 모드 또는 좁은 화면 모드. 첫 번째 경우에는 페이지가 현재 (첫 번째 테이블) 그대로 렌더링되고 두 번째 방법을 선택하는 경우 옵션 A (두 번째 테이블)에 설명 된대로 구성됩니다. 이 항목은 여전히 괜찮은 항목 # 1을 구현해야합니다.
옵션 C :하지만 가장 좋은 방법은 UI를 민첩하게 만드는 것입니다. 페이지가 넓어지면 콘텐츠 div 요소가 연속적으로 표시됩니다 순서; 페이지가 좁 으면 열 순서로 표시됩니다.
그래서 Block1, Block2는 비슷한 너비와 높이를 가지며 브라우저에 자동으로 배치됩니다.
질문 # 1 : HTML + CSS 마크 업만 사용하여 옵션 C를 구현하는 방법은 무엇입니까?
블럭 1, 블럭 2는 style = "float : left"을 가지고 있어야하지만, 블럭 2는 블럭이 너무 좁지 않으면 블럭 1의 오른쪽에있다. "큰 블록"은 2 개의 작은 것에서 오른쪽에 절대로 존재하지 않습니다 (아래 코드 참조).
질문 2 : 옵션 C를 구현하는 것이 합리적입니까?
P. 내 프로토 타입은 다음과 같습니다.
<html>
<head><title>Test blocks</title></head>
<body>
<style type="text/css">
div {
border: 1px solid black;
position: relative;
}
div.b1 {
width:300px;
height: 200px;
float: left;
}
div.b2 {
width:300px;
height: 100px;
float: left;
}
div.big {
width: 800px;
height: 200px;
float: left;
}
</style>
<div class="b1"> Block 1 </div>
<div class="b2"> Block 2</div>
<div class="big"> Big Data block</div>
</body></html>
P.P.S. 보이는 부분에 테두리를 두어 해당 div 만 나타냅니다. 최종 표식에는 표시되지 않습니다.
그건 _responsive design_이라고합니다. 미디어 쿼리를 살펴보십시오. – SLaks
'미디어 쿼리'에서 의미하는 바를 명확히 설명해 주시겠습니까? – Budda
Google은 친구입니다. 그 두 문구를 개별적으로 검색하십시오. –