沒有DIV容器創建CSS電網

Question

你好stackoverflowers，我在這一塊的HTML代碼

：

<div class="container"> 
    <div class="block row1 column1"></div> 
    <div class="block row1 column2"></div> 
    <div class="block row1 column3"></div> 
    <div class="block row2 column1"></div> 
    <div class="block row2 column2"></div> 
    <div class="block row2 column3"></div> 
    <div class="block row3 column1"></div> 
    <div class="block row3 column2"></div> 
    <div class="block row3 column3"></div> 
</div> 

我怎樣才能創建使用CSS的div一個3x3格不改變HTML？

親切的問候，丹尼斯

編輯：是否有人知道如何保持塊作爲一個正方形和中心。例如容器是700px x 700px，塊是100px x 100px。

Answer 1

這應該做到這一點：

.block { 
    float:left; 
    width:33.3%; 
    box-sizing:border-box; 
    margin:0; 
} 

的float允許的div是通過彼此的側，寬度爲1/3。

編輯：

如果你想塊矩形的，你需要設置的寬度和高度。

讓我們去你的榜樣：

.container { 
    width:700px 
} 
.block { 
    float:left; 
    width:100px; 
    height:100px; 
    box-sizing:border-box; 
    margin:0; 
} 

現在，會有一排7塊，當塊100像素寬，容器是700像素寬。如果你想他們是3每行，你可以添加這個CSS：

.block:nth-child(4n+4) { 
    clear:left; 
} 

或者：

.column1 { 
    clear:left; 
} 

Answer 2

解決方案的兩個問題 -

<h1>3x3 Grid</h1> 
<div class="container"> 
    <div class="block row1 column1">1</div> 
    <div class="block row1 column2">2</div> 
    <div class="block row1 column3">3</div> 
    <div class="block row2 column1">4</div> 
    <div class="block row2 column2">5</div> 
    <div class="block row2 column3">6</div> 
    <div class="block row3 column1">7</div> 
    <div class="block row3 column2">8</div> 
    <div class="block row3 column3">9</div> 
</div> 

<h1>Centered box with 100px x 100px</h1> 
<div class="container container2"> 
    <div class="block row1 column1">1</div> 
    <div class="block row1 column2">2</div> 
    <div class="block row1 column3">3</div> 
    <div class="block row2 column1">4</div> 
    <div class="block row2 column2">5</div> 
    <div class="block row2 column3">6</div> 
    <div class="block row3 column1">7</div> 
    <div class="block row3 column2">8</div> 
    <div class="block row3 column3">9</div> 
</div> 

.container *{ 
    box-sizing: border-box; 
} 
.container{ 
    width:700px; 
    box-sizing: border-box; 
} 

.container:after{ 
    display:block; 
    clear:both; 
    content:""; 
} 
.block { 
    float:left; 
    width:33.3%; 
    box-sizing:border-box; 
    margin:0; 
} 

.container2{ 
    text-align:center; 
} 
.container2 .block{ 
    float:none; 
    position:relative; 
    height:100px; 
    width:100px; 
    display: inline-block; 
} 

我猜你得到的答案對於你的兩個問題。