인라인 블록을 사용하여 그리드 프레임 워크 구현

Question

저는 http://getcrow.eu을 업데이트하려고합니다. 문제를 해결하기 위해 하나의 "이슈"를 가지고 있습니다. 까마귀 tables, absolute positioning, floats 또는 clearfix '의 ES를 사용하지 않으며, 그 상태를 유지해야합니다

중요

알 수 있습니다.

우리는 지금처럼 서로 옆에 인라인 블록을 넣어 것을 알고 : CSS와

<div class="parent"> 
    <div>Block 1</div> 
    <div>Block 2</div> 
    <div>Block 3</div> 
</div> 

:

.parent { 
    > div { 
    display: inline-block; 
    } 
} 

은 블록 사이에 화이트 스페이스를 작성합니다. 또한 공백을 만드는 것을 방지하는 몇 가지 해결책이 있다는 것을 알고 있습니다.이 방법으로 그리드 프레임 워크를 생성하는 경우 매우 필요합니다.

난 알고 있어요 왜 내가 /를 사용할 수 없습니다하지 않을 방법을 목록 아래 :

---

(당신이 질문에 얻고 싶은 경우에 SKIP)

1. HTML inbetween children div의 주석. 이유가 없습니다. 까마귀를 사용하는 개발자가 알고 있어야하고 작동해야하는 못생긴 HTML을 만듭니다.

2. 어린이 태그 끝/줄 바꿈 태그를 사용하지 않고 줄 바꿈. 해당 사항 없음 위의 내용과 동일합니다.

3. .parent-wrapper에서 빼기 (-) 여백을 사용합니다. No-go because : 지정된 여백은 문서 글꼴 크기에 따라 달라 지므로 응답 마크 업에서 격자가 깨질 수 있습니다. 여기서 html {font-size : {X} px; } 변경됩니다.

4. 0px font-size를 .parent로 설정하고 어린이의 글꼴 크기를 "재설정"합니다 (현재 사용하고있는 방법입니다). 이유가 없습니다. 나는 까마귀를 사용하는 개발자가 아이들을 강제로 설정하는 것을 원하지 않습니다. 난 단지 글꼴 크기를 아래쪽으로 설정하는 격자가없는 상속을 자연스럽게 원합니다.

5. .crow 요소에서 모든 공백을 제거하기 위해 자바 스크립트 사용. 이유가 없습니다. 프레임 워크를 순수한 CSS와 js가 아니게 만들고 싶습니다. 사용자가 연결 상태가 좋지 않으면 pageload 후 DOM을 "flick"할 수도 있습니다.

6. 공백이없는 .parent에 font-family가있는 글꼴을로드하는 중입니다. No-go 이유로 인해 : 그리드 프레임 워크를 얻는 데 추가 글꼴을로드하는 것이 잘못되었습니다. 특히 여분의 파일 (글꼴 파일)을 다운로드하고 모든 브라우저에서 폴백을 선언해야하므로 특히 그렇습니다.

7. 문자 간격 사용 - {X} px on .parent. 이유가 없음 : .3과 동일 (위 참조)

8. 플렉스 상자 사용. No-go because : 프레임 워크는 수직 중심 맞춤 (원하는 경우)에 중점을두고 플렉스 박스는 자신의 삶을 그대로 유지합니다. 또한 그리드가 IE8을 지원하는지 확인하고 있습니다.

---

그래서 기본적으로 내가 찾고 있어요 - 인라인 블록 사이에 공백을 제거 - 내가 잘 모르는 것 같아요/아직 발견되지 알 수없는/방법. 나는 그것이 순수한 CSS가되기를 원한다. 당신이 알고 있거나 생각할 수있는 방법이 있다면 - 다른 브라우저에서 시도해 볼 수 있습니다.

이 문제를 해결하면 Crow가 최고의 그리드 프레임 워크가 될 것입니다. 저는 이미 여러 웹 사이트에서이 도구를 사용하고 있으며, 요소를 세로로 쉽게 배치 할 수있는 가능성이 있다고 생각합니다.

사이드 노트 : DOM을 다음과 같이 표시하면 : <div class="parent"><div>Block 1</div><div>Block 2</div></div>은 원하는대로 작업을 수행합니다. 하지만 그렇게하려면 크로우 (Crow)를 사용하는 개발자가 그런 식으로 표시해야합니다. 그리고 HTML을 만드는 프레임 워크에 의존하고 싶지 않습니다.

Answer 1

InuitCSS (최근 프레임 워크 선택)는 유사한 시스템을 사용합니다. display: inline-block;을 그리드 시스템에 사용하는 것만 큼 훌륭하기 때문에 공백 문제가 내재 된 것으로 보입니다. 현재 해결 방법 이상으로 해결할 가능성은 거의 없습니다.

의견이나 종료 태그를 사용하면 CMS 항목에 몇 가지 문제가 발생하고 관련 개발자에게 일정 정도의 정신적 오버 헤드가 발생한다는 것에 동의합니다. 관리하기 어려운 금액은 아닙니다.

당신은 이누이트의 그리드에서보기를 원한다면 나는 그것이 GitHub의이 여기있어 추천 할 것입니다 : https://github.com/inuitcss

나는 또한이 문제를 읽고 권합니다에서-하는 이누이트의 창조자; 해리 로버츠 (Harry Roberts)는이 문제에 다양한 해결책을 제시합니다. 당신이 이미 모르는 것을 말할 수는 없지만, 문제에 관한 흥미로운 (오래된 것이라면) 토론입니다.

https://github.com/csswizardry/inuit.css/issues/170

본인은 위의 문제에 어떤을 밝혀도 문제를 해결하거나하지 않을 것을 알고,하지만 난 그것을 사용이 될 수 있기를 바랍니다.

Answer 2

플로트를 사용하는 것이 가장 좋습니다.

.parent div { 
    float: left; 
} 

아래 의견에 따라 음수 여백을 사용할 수 있습니다.

.parent div { 
    margin-left: -4px; 
} 

하지만 브라우저에 따라 브라우저가 변경 될 수 있습니다.