如何用CSS創建一個正方形數組的新行

我正在嘗試使用CSS創建正方形的「網格」。到目前爲止，我已經試過：如何用CSS創建一個正方形數組的新行

.square { 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 30px; 
 
}

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

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

然而，這只是顯示在連續6個格。不過，我想每行都有兩排3格。爲什麼包含div沒有'正常'的行爲，他們顯示在彼此之下？

來源

2017-11-18 Kurt Peek

嘗試寫在所提供的插件的jsfiddle你的問題。 – Adriano

尊敬的是，你的例子中沒有方陣。這是幾個'div'元素。請參閱CSS的新Grid或CSS Flexbox，具體取決於您的需要。 –

你要清楚你的floatting元素

https://css-tricks.com/all-about-floats/

清除浮動

浮動的姐妹的財產是明確的。具有明確的屬性上設置一個元素不會往上移靠近浮像漂浮的慾望，但將自身向下移動過去的浮動....

.square { 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 30px; 
 
} 
 
body>div {overflow:hidden;}

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

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

來源

2017-11-18 00:38:35

像這樣的東西？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 

 
.square-wrapper { 
 
width: 276px; 
 
} 
 
.square { 
 
    display: inline-block; 
 
    float: left; 
 
    border: 1px solid black; 
 
    width: 30px; 
 
    height: 50px; 
 
    margin: 30px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="square-wrapper"> 
 
<div class="square">1</div> 
 
<div class="square">2</div> 
 
<div class="square">3</div> 
 
</div> 
 

 
<div class="square-wrapper"> 
 
<div class="square">4</div> 
 
<div class="square">5</div> 
 
<div class="square">6</div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-11-18 00:34:34 Adriano

這是因爲float: left。

選項1：

display:inline-block使用代替float:left：

.square { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 30px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

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

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

 
</body> 
 
</html>

選項2 使用clearfix在父DIV：

.square { 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 30px; 
 
} 
 
.parent{ 
 
    \t clear: both; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<div class="parent"> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
</div> 
 

 
<div class="parent"> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-11-18 00:36:15

您可以將塊放在包含具有固定寬度的div的內部。這將強制塊根據其顯示類型進行堆棧。例如，將容器的寬度設置爲400px可爲連續的三個塊提供足夠的空間。框架使用一個對於創建均勻分散在容器中的網格非常有用的系統。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.square { 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 30px; 
 
    } 
 
.container { 
 
    width:400px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 

 
<!-- Place all of your blocks in a single container --> 
 

 
<div class="container"> 
 

 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<!-- The container is not large enough to display all of the blocks in one row --> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-11-18 00:42:29

如何用CSS創建一個正方形數組的新行

回答

相關問題