CSS의 열 배치는 대상 기기에 따라 다릅니다.

Question

현재 다른 기기 (데스크톱, 모바일 등 ...)에서 충분히 반응하고 액세스 할 수 있어야하는 웹 사이트에서 작업하고 있습니다. HTML 마크 업을 하나만 갖고 싶습니다. 다른 유형의 레이아웃을 얻기 위해 미디어 쿼리로 작업하고 있습니다.

깨끗한 마크 업을 가지고 시작하는 것이 중요합니다. 일을 더 쉽게하기 위해 모든 불필요한 것들을 제거합니다. 나는 기사 목록을 가지고있다. 각 기사의 내용은 VARIABLE이므로 고정 된 높이를 결정할 수 없습니다. 내 목표는 장치를 기반으로 이러한 섹션을 정렬하는 것입니다. 따라서 예 :

1) 모바일 장치에는 한 개의 열만 있고 모든 섹션은 서로 아래에 있습니다.

2) 타블렛에 2 개의 기둥이 있어야하므로 2 개의 기사가 서로 나란히 있습니다 (아래 이미지 참조). 내가 3 열이하고 싶은 바탕 화면에서

3) ...

내 태그는 다음과 같습니다 내가 마크 업에 열 (추가 마크 업 등을 포함 한 경우 등 colums 같은 어떤 표상 물건의 인식 with column-divs) 대상 장치를 기반으로 레이아웃을 변경할 기회가 없습니다. 이것은 "마크 업 시간"에서 레이아웃/프리젠 테이션을 수정했음을 의미합니다.

<article> 
    <h1>Header<h1> 
    <p>Some text...</p> 
</article> 
<article> 
    <h1>Header<h1> 
    <p>Some text...</p> 
</article> 
<article> 
    <h1>Header<h1> 
    <p>Some text...</p> 
</article> 
<article> 
    <h1>Header<h1> 
    <p>Some text...</p> 
</article> 
<article> 
    <h1>Header<h1> 
    <p>Some text...</p> 
</article> 

저는 초심자가 아닙니다. 나는 지난 며칠 동안 거의 모든 것을 시도했습니다.

그래서 어떻게 기사를 일반적인 2 열 레이아웃으로 정렬 할 수 있습니까? 모든 기사의 높이가 같으면 매우 쉬울 것입니다. 1 칼럼도 전혀 문제가되지 않습니다. 3 개의 열은 2 개의 열보다 구현이 더 어렵습니다.

desired layout with 2 columns http://oi44.tinypic.com/2djyrli.jpg

그러나 수레 (플로트 : 왼쪽)와 함께 작업 할 때 나는이 결과를 얻는다 :

2 열에 대한 원하는 레이아웃과 같이이다

float with left http://oi43.tinypic.com/2rw6qtk.png

MS-그리드 flexbox는 이전 브라우저 (지원해야하는)에서 지원이 부족하기 때문에 대안이 아닙니다.

미리 감사드립니다.

Answer 1

나는 당신의 요구 사항과 CSS3를 사용하는 일반적인 RWD와 어떻게 다른지는 모르지만 그게 무슨 소리가 나는지 잘 모르겠습니다. 미디어 쿼리를 사용하여 다른 화면 해상도간에 레이아웃에 응답 할 수 있습니다. 다양한 모바일 및 태블릿 포함. 초상화와 조경 전망.

다음은 하나의 예입니다.

@media screen and (max-width: 480px) { 
    #leftbox { 
    margin-right: 100px; 
    } 
} 

참조 용으로이 링크를 살펴보십시오. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

또는 각 해상도마다 완전히 새로운 레이아웃으로 새 스타일 시트를로드 할 수 있습니다.

Answer 2

질문을 명확히하기 위해 :

나는 미디어 쿼리를 사용하는 방법을 알고 있습니다. 질문은 삽화가 보여주는 것과 같이 기사를 배열하는 방법에 한합니다.