使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