使div 100px乘100px

Question

如何讓這些div的特定大小不使用任何其他CSS和HTML？

正如你可以看到，如果你自己嘗試這個代碼。
我把這些盒子全部連成一排。
編號喜歡最終更多，使幾乎一個網格。

body { 
 
    background-color: #fff; 
 
} 
 
.blackcolor1 { 
 
    background-color: #000; 
 
    padding: 40px; 
 
    margin: 10px; 
 
    display: inline; 
 
    min-height: 100px !important; 
 
    min-width: 100px !important; 
 
    max-height: 100px !important; 
 
    max-width: 100px !important; 
 
} 
 
.border { 
 
    margin: 100px; 
 
    padding: 1px; 
 
}

<div class="border"> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
</div>

我夜夜都做我知道該怎麼做的事情。
但我的div的尺寸不會達到100px X 100px。
我只能讓他們關閉。
我並不需要在論文中提供任何內容供他們使用。

Answer 1

您不能分配大小，以行內元素：

此屬性不適用於非替換行內元素。未替換內聯元素的框的內容寬度是其中呈現內容的內容寬度（在兒童的任何相對偏移量之前）。
http://www.w3.org/TR/CSS2/visudet.html#propdef-width

更換display: inline與display: inline-block會給你預期的大小，同時允許元素在同一行存在。

注意填充添加到箱尺寸，除非你使用box-sizing: border-box

body { 
 
    background-color: #fff; 
 
} 
 
.blackcolor1 { 
 
    box-sizing: border-box; 
 
    background-color: #000; 
 
    padding: 40px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    min-height: 100px !important; 
 
    min-width: 100px !important; 
 
    max-height: 100px !important; 
 
    max-width: 100px !important; 
 
} 
 
.border { 
 
    margin: 100px; 
 
    padding: 1px; 
 
}

<div class="border"> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
    <div class="blackcolor1"></div> 
 
</div>

Answer 2

我想你想設置顯示屬性爲inline-block而不是inline。單獨使用inline使得div的行爲與span的行爲相同，而inline-block可讓您指定寬度和高度，但也可以與其餘元素保持一致。

Answer 3

替換您display:inline與float:left;

FIDDLE