이 유체 그리드 레이아웃은 어디서 잘못 되었습니까?

Question

여기가 처음입니다. 친구는 이것을 좋은 지식의 원천으로 제안했으며, 나는 그것을 절대적으로 필요로합니다!

뷰포트, 미디어 쿼리 및 유동 그리드를 사용하여 HTML과 CSS를 작성하여 데스크톱 (desktop example)에서 모바일 (mobile example)까지 확장되는 페이지를 만듭니다.

나는 w3c 사이트의 도움으로 그것을 함께 자갈려고 노력했지만, 특별히 도움이되지 않은 사람은 내가 거기에 부트 스트랩을 가지고 있다고 말했고 (나는 그걸 사용하려고하지 않았고 꺼내고 싶었지만 그것이 무엇인지 전혀 모른다).

내가 달성 한 것은 모바일 크기의 작업을하는 것입니다. 그러나 어떤 이유로 데스크톱의 행 너비의 50 %와 25 %가되어야하는 상자의 색상 영역은 다음과 같이 늘리지 않습니다. 그들은해야.

내가 뭘 잘못 했니? 도움이 가장 많이, 가장 높이 평가 될 것입니다!

이

내가 작성했던 HTML입니다 :

And this is the CSS: @charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
.row::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
[class*="col-"] { 
 
    float: left; 
 
    padding: 8px; 
 
    border: thin rgba(0, 0, 0, 1.00); 
 
} 
 

 
.col-1 { 
 
    width: 8.33%; 
 
} 
 

 
.col-2 { 
 
    width: 16.66%; 
 
} 
 

 
.col-3 { 
 
    width: 25%; 
 
} 
 

 
.col-4 { 
 
    width: 33.33%; 
 
} 
 

 
.col-5 { 
 
    width: 41.66%; 
 
} 
 

 
.col-6 { 
 
    width: 50%; 
 
} 
 

 
.col-7 { 
 
    width: 58.33%; 
 
} 
 

 
.col-8 { 
 
    width: 66.66%; 
 
} 
 

 
.col-9 { 
 
    width: 75%; 
 
} 
 

 
.col-10 { 
 
    width: 83.33%; 
 
} 
 

 
.col-11 { 
 
    width: 91.66%; 
 
} 
 

 
.col-12 { 
 
    width: 100%; 
 
} 
 

 
html { 
 
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; 
 
} 
 

 
.navspot { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    padding: 10px; 
 
    height: auto; 
 
    vertical-align: middle; 
 
    background: #d9cf91; 
 
    text-align: right; 
 
} 
 

 
.maincontent { 
 
    /*properties for cell*/ 
 
    /*Nothing is required here 
 
    because we can use default styles*/ 
 
    background: #30332c; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
} 
 

 
.box1 { 
 
    background-color: #dfcf91; 
 
    color: #FFFFFF; 
 
    padding: 10px; 
 
    text-align: left; 
 
    float: left; 
 
} 
 

 
.box2 { 
 
    background-color: rgba(107, 35, 36, 1.00); 
 
    color: #FFFFFF; 
 
    text-align: center; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
.box3 { 
 
    background-color: #8D9981; 
 
    text-align: center; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
.box4 { 
 
    background-color: #606956; 
 
    text-align: center; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
.box5 { 
 
    background-color: #8D9981; 
 
    text-align: center; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
.box6 { 
 
    background-color: #606956; 
 
    text-align: center; 
 
    padding: 10px; 
 
    float: left; 
 
} 
 

 
.footer { 
 
    /*properties for cell*/ 
 
    /*Nothing is required here because we can use default styles*/ 
 
    /*background: #d9cf91;*/ 
 
    padding: 10px; 
 
} 
 

 

 
/*for phone*/ 
 

 
@media only screen and (max-width: 768px) { 
 
    [class*="col-"] { 
 
    width: 100%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col"> 
 
    <div class="navspot">Navigation Spot 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col"> 
 
    <div class="maincontent">Main Content Spot 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-6"> 
 
    <div class="box1">Box 1 
 
    </div> 
 
    </div> 
 
    <div class="col-6"> 
 
    <div class="box2">Box 2 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-3"> 
 
    <div class="box3">Box 3 
 
    </div> 
 
    </div> 
 

 
    <div class="col-3"> 
 
    <div class="box4">Box 4 
 
    </div> 
 
    </div> 
 

 
    <div class="col-3"> 
 
    <div class="box5">Box 5 
 
    </div> 
 
    </div> 
 

 
    <div class="col-3"> 
 
    <div class="box6">Box 6 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col"> 
 
     <div class="footer">Footer Area 
 
     </div> 
 
    </div> 
 
    </div>

내가 무지 렁이되고있어 경우

죄송합니다. CSS와 유동성의 개념에 정말 고심하고 있습니다. 미리 감사드립니다!

Answer 1

수정 1 : 컬러 콘텐츠 상자

이 이 ovokuro 말한대로 수행하고 ".box"클래스의 ALL에서 float:left; 줄을 제거 스트레칭 없습니다.

수정 2 : 예상대로 열 행동과 포장 그리드에서 귀하의 그리드

일부 DIV 요소는 border-box 모델을 상속하지 않습니다. 모든 브라우저에서이 문제를 해결하려면 추가

html { 
    box-sizing: border-box; 
    } 
*, *:before, *:after { 
    box-sizing: inherit; 
    } 

이에 대한 자세한 내용은 참조 Box Sizing > Universal Box Sizing with Inheritance

수정 3 : 가이드

보다 쉽게 ​​할 수 있도록 그리드에 몇 가지 가이드를 추가 학습하는 동안 당신이하고있는 일과 어떻게 사물이 관련되어 있는지를보십시오. 예 :

/* temporary orange column guides */ 

    [class*="col-"] { 
    border: 1px dotted orange; 
    }