如何創造一個響應棋盤

我想創建一個響應式棋盤，移動友好和改變大小時窗口最小化，但我似乎擺脫內部的div顏色和外部div sqaure之間的空間。不知道我做錯了什麼。如何創造一個響應棋盤

HTML：

<body> 
    <p></p> 
    <div class="square"> 

    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <!--2nd --> 

    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <!--2nd --> 

    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <!--2nd --> 

    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <!--2nd --> 

    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <!--2nd --> 

    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <!--2nd --> 

    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <!--2nd --> 

    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 
    <div class="black"></div> 
    <div class="red"></div> 

    </div> 

</body>

CSS：

.square { 
    border: 10px solid gray; 
    text-align: center; 
    width: 60vw; 
    height: 60vw;  
    margin: auto; 
} 
.red { 
    background-color: red; 
    height: 11.5%; 
    width: 11.5%; 
    max-height: 100vw; 
    max-width: 100vw; 
    float: left;  
    padding:0; 
    margin:auto; 

} 

.black { 
    background-color: black; 
    height: 11.5%; 
    width: 11.5%; 
    max-height: 100vw; 
    max-width: 100vw; 
    float: left; 
    padding:0; 
    margin:auto; 
}

來源

2017-02-25 xeen_1

％或大衆是不會幫你的。你爲什麼不試試JS？根據寬度做所有事情，一切都將完美運行。 –

有一個與你的數學問題。你給每個廣場11.5％的寬度，這增加了92％。應該是12.5％加起來達到100％（即容器的整個寬度）。

.square { 
 
    border: 10px solid gray; 
 
    text-align: center; 
 
    width: 60vw; 
 
    height: 60vw; 
 
    margin: auto; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
    height: 12.5%; 
 
    width: 12.5%; 
 
    max-height: 100vw; 
 
    max-width: 100vw; 
 
    float: left; 
 
    padding: 0; 
 
    margin: auto; 
 
} 
 

 
.black { 
 
    background-color: black; 
 
    height: 12.5%; 
 
    width: 12.5%; 
 
    max-height: 100vw; 
 
    max-width: 100vw; 
 
    float: left; 
 
    padding: 0; 
 
    margin: auto; 
 
}

<body> 
 
    <p></p> 
 
    <div class="square"> 
 

 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <!--2nd --> 
 

 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <!--2nd --> 
 

 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <!--2nd --> 
 

 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <!--2nd --> 
 

 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <!--2nd --> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <!--2nd --> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <!--2nd --> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 
    <div class="black"></div> 
 
    <div class="red"></div> 
 

 
    </div> 
 

 
</body>

JSFiddle

來源

2017-02-25 21:11:55 SelketDaly

如何創造一個響應棋盤

回答

相關問題