비대칭 그리드 프레임 워크가 거터를 생성하지 못하는 것 같습니다.

이 질문은 비대 기적 그리드 프레임 워크 (unsemantic.com)와 관련이 있습니다.비대칭 그리드 프레임 워크가 거터를 생성하지 못하는 것 같습니다.

.grid-container:before, .clearfix:before, 
    .grid-container:after, 
    .clearfix:after { 
    content: "."; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    font-size: 0; 
    line-height: 0; 
    width: 0; 
    height: 0; 
    } 

    .grid-container:after, .clearfix:after { 
    clear: both; 
    } 

    .grid-container { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1200px; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 

    .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 

    .grid-parent { 
    padding-left: 0; 
    padding-right: 0; 
    }

나는 unsemantic-grid-responsive-no-ie7.css 파일을 사용하고 있습니다 :

<!DOCTYPE html> 

<html> 

<head> 

    <link rel="stylesheet" href="css/unsemantic-grid-responsive-no-ie7.css" /> 

    <style> 
     div.blue { 
      background-color: #00f; 
     } 

     div.green { 
      background-color: #0f0; 
     } 
    </style> 


</head> 

<body> 

    <div class="grid-container"> 
     <div class="grid-30 blue"> 
      30% 
     </div> 
     <div class="grid-70 green"> 
      70% 
     </div> 
    </div> 


</body> 

</html>

이 핵심 측면을 정의 다루는 unsemantinc의 CSS 부분은 다음과 같습니다

이 내 HTML입니다. 이론 상으로는 두 개의 div를 나란히 만들어야하는데 하나는 가로 30 %, 세로 70 %를 사용합니다. 그 (것)들 사이에서, 당신이 (비대양에 따라) specs 인 경우에 20px gutter 또는 공간이어야한다.

그러나 나는 거터를 얻을 수없는 것처럼 보입니다. divs는 함께 붙어 있습니다.

의견이 있으십니까?

출처

2013-06-06 fizzy drink

제공하신 코드를 보면 거터를 추가하는 방법을 알 수 없습니다. 거터를 정의하는 관련 HTML/CSS 스 니펫을 추가 할 수 있습니까? – Doug

표시 할 CSS 추가됨 –

여백은 마진이 아닌 여백으로 추가됩니다.

컨테이너 내부에 2 개의 열 (배경색 적용)이 표시되며 20px의 눈금이 보이지 않습니다. 컨테이너에는 각면이 10px 패딩되고 각 열의 내용에는 각면이 10px 패딩됩니다.

가시적 인 거터를 원한다면 추가 div를 중첩해야합니다.

출처

2013-07-02 16:59:26 Wicky

여백 기반 거터의 경우 prefix- {width} 또는 suffix- {width} 클래스를 사용할 수 있습니다.

<div class="grid-35 suffix-5"> 
content 
</div> 
<div class="grid-60"> 
content 
</div>

두 열 사이에 5 %가 있어야합니다.

출처

2014-01-30 00:41:02 atmarx

비대칭 그리드 프레임 워크가 거터를 생성하지 못하는 것 같습니다.

답변

관련 문제