나는 사용자가 읽고 싶어하는 것들로 div 열 두 개가있는 웹 사이트를 운영하고 있습니다. 동일한 세로 높이가 보장되지는 않습니다.HTML에서 두 개의 열을 모바일 화면 용으로 하나로 병합하려면 어떻게해야합니까?
웹 사이트를 작은 브라우저 또는 모바일 장치에서 볼 때 두 열을 하나의 열에 병합하여 항목간에 서로 끼워 넣기를 원합니다. 일반적으로 예를 들어
:
[A1] [B1
[A2 B1]
A2] [B2
[A3] B2]
[A4] [B3]
모바일 :
[A1]
[B1
B1]
[A2
A2]
[B2
B2]
[A3]
[B3]
[A4]
반응 디자인이 할 수있는 좋은 CSS의 방법이 있나요? 순수 또는 Gumby와 같은 반응이 빠른 스타일 시트를 사용하고 있습니다. 또는 JS를 사용해야하는 경우, JS의 경우 최상의 방법에 대한 권장 사항은 무엇입니까?
당신이하고있는 일을하는 '실제적인'방법은 없습니다. 그러나 어떤 의미에서는 각자 자신의 수업을 가질 수 있다고 생각합니다. 그리고 당신은 그것들을 왼쪽이나 오른쪽으로 띄웁니다. (그들이 필요한 곳이면 어디든.) 패턴은 대체로 왼쪽 오른쪽 아래 오른쪽, 왼쪽, 아래, 왼쪽 오른쪽 ... 반복되기 때문에.
그리고 나서 열을 결합해야 할 때 너비를 100 %로 설정하거나 블록을 표시 할 수 있습니다.
(두 개의 컬럼으로 구분이. 그러나이 같은 목록 인 것처럼 봐.)
.side-by-side li{width: 50%;display: inline-block;}
.side-by-side .l{float: left;}
.side-by-side .r{float: right;}
.block li{width: 100%;display: block;}
.block{border-top: 1px solid black; margin-top: 25px;padding-top: 25px;clear: both;}
당신은 브라우저 호환성 문제에 대해 조심해야하지만거야 당신이 할 수 새로운 CSS3 열 수를 사용하십시오. 여기
는 순수를 사용하는 경우 http://www.w3schools.com/css/css3_multiple_columns.asp
, 현재 마크 업이 무엇입니까 http://purecss.io/grids/ – laruiss
볼 ... ... http://jsbin.com/dipafa/1/edit
의 참조 예입니다? 현재 스타일링이란 무엇입니까? –