2017-04-15 79 views
0

這是我第一次來這裏。一位朋友認爲這是一個很好的知識來源,我迫切需要這一點!我在哪裏出錯了這個流體網格佈局?

我正在嘗試使用視口,媒體查詢和流體網格編寫HTML和CSS,以創建一個從桌面(desktop example)到移動(mobile example)的縮放頁面。

我試圖在w3c網站的幫助下將它拼湊在一起,但是沒有特別幫助的人說我在那裏有bootstrap(我不打算使用它,並且希望它被取出但我有不知道它是什麼)。

我設法實現的是讓手機尺寸工作,但由於某些原因,應該是桌面行寬度的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和流動性的概念鬥爭。提前致謝!

+0

您搞砸了Code Snippet。 –

+1

你想要框填充列嗎?從盒子類中移除浮動屬性 – sol

+0

彩色區域(.boxX)不能是全寬,由於float:left,它會很小,這就是爲什麼你不能「看見」可見列。列布局似乎很好。 –

回答

0

修復1:彩色內容框未拉伸

做的 ovokuro說,並從ALL你的 「.box的」 類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; 
    } 
+0

和ovokuro,這些評論是非常有幫助的。有用!我很高興。非常感謝! – DMB66