Question

如何在不使用CSS和HTML之外的任何其他内容的情况下将这些div设为特定大小？

正如您所看到的，您是否自己尝试使用此代码我把这些盒子连成一排我想最终拥有更多，几乎成为一个网格。

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

我认为您要将display属性设置为inline-block而不是inline。 inline单独使div行为与span相同，而inline-block则允许您指定宽度和高度，但也可以与其他元素一致。

Answer 3

将display:inline替换为float:left;

FIDDLE

使div 100px乘以100px

3 个答案: