CSS 레이아웃 문제 :

Question

어려운 질문입니다. CSS 레이아웃에 대해 많이 알고있는 사람들에게 물어보고, 레이아웃이 그렇게 악몽 인 이유를 물어볼 시간입니다.

이 이미지를 고려

파란색 선이 뷰포트를 나타냅니다. 레이아웃은 응용 프로그램에 의해 가로/가로로 강제됩니다. 사용자는 이것을 이해하므로 문제는 아닙니다.

제약 조건 ... 왼쪽의 열은 사용 가능한 뷰포트 공간의 30 %를 차지할 수 없습니다. 그렇게 쉬운 일입니다. 오른쪽의 tic-tac-toe grid가 나머지를 차지할 것입니다. 왼쪽 열과 그리드 사이에는 약 12px 공간 (여백, 패딩 등)이 있습니다. 이 예제에서 오른쪽에있는 격자는 9 개의 상자를 갖지만 더 적게 가질 수 있으므로 그에 따라 이동할 필요가 있습니다. 격자의 열 너비는 동일해야합니다. 그리드의 행 높이는 같아야합니다. 그리드의 각 상자에있는 텍스트는 크기가 불균형 (폭 또는 높이)이되도록 강제 할 수 없습니다. 즉, overflow : hidden은 허용 가능하거나 줄임표를 추가하고 줄임표를 추가합니다.

데스크톱 컴퓨터, 휴대 전화, 태블릿 등에 표시 할 수 있습니다. 레이아웃은 적응해야하지만 큰 문제는 아닙니다. 비율/크기 유지는 다음과 같습니다.

그렇습니다. 교활한. 나는 의도적으로 코드를 게시하지 않았다. 왜냐하면이 코드는 쓸모 없게되고, 계몽 된 사람들이 가질 수있는 아이디어를 더럽힐 가능성이있는 그런 괴물이되어 버리기 때문이다.

생각하십니까? 도움? 미리 감사드립니다.

Answer 1

flexbox을 사용하면 쉽게 처리 할 수 ​​있습니다. 다음은 3으로 래퍼 너비와 높이와 격차를 받고, 자바 스크립트를 사용하여 작업을 수행하고, u는 포함 있다면 그것은 좋은 것

콩알 셀에 값을 지정할 수 있습니다, 또한 complete tutorial on flexbox

의 당신의 코드

Answer 2

이것을 위해 Flexbox를 사용해보십시오. 그러면 문제를 쉽게 해결할 수 있습니다.

이 링크가 귀하의 문제를 해결하는 데 도움이되기를 바랍니다. Link 1

2. Link 2