如何在不使用flex的情況下對div中的div進行空格環繞

Question

我有一個div 3周divs 。 內部divs是正方形。 我想做的事justify-content:space-around不使用flex。 另外，如果要使用space-around如何減少元素之間的邊距。 我覺得他們彼此相距太遠。

 .squareContainer{ overflow: hidden; width:1200px; background-color:black; } .sqC{ width: 300px; height: 300px; background-color: #7F5F01; color: white; text-align: center; margin: 5px; } .floatClass{ float: left; } 

 <div class="squareContainer"> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> </div> 

Answer 1

您是否嘗試過使用display: inline-block; ？

添加text-align: center; 並display: block; 到squareContainer 。

還添加display: inline-block; 到sqC類並刪除float: left 。

 .squareContainer{ overflow: hidden; width:1200px; background-color:black; text-align: center; display: block; } .sqC{ width: 300px; height: 300px; background-color: #7F5F01; color: white; text-align: center; margin: 5px; display: inline-block; } .floatClass{ // float: left; } 

 <div class="squareContainer"> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> </div> 

Answer 2

您可以根據需要更改邊距屬性：

.sqC {
    width: 300px;
    height: 300px;
    background-color: #7F5F01;
    color: white;
    text-align: center;
    margin: 5px 2px;
}

Answer 3

您為什么不修改保證金？

 .squareContainer{ overflow: hidden; width:1200px; background-color:black; } .sqC{ width: 300px; height: 300px; background-color: #7F5F01; color: white; text-align: center; margin: 1px; } .floatClass{ float: left; } 

 <div class="squareContainer"> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> </div> 

Answer 4

您可以使用固定邊距將元素均勻地隔開。

 .squareContainer{ overflow: hidden; width:1200px; background-color:black; } .sqC{ width: 300px; height: 300px; background-color: #7F5F01; color: white; text-align: center; margin: 5px 50px; } .floatClass{ float: left; } 

 <div class="squareContainer"> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> </div> 

或者您可以使用相對敏感的單位

 .squareContainer{ overflow: hidden; background-color:black; } .sqC{ width: 30%; height: 300px; background-color: #7F5F01; color: white; text-align: center; margin: 5px 1.5%; } .floatClass{ float: left; } 

 <div class="squareContainer"> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> <div class="floatClass sqC"> <h2>SQUARE</h2> </div> </div>