如何在不使用 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。
我只能让他们靠近。
我不必在论文中添加任何内容就可以让它们工作。
最佳答案
您不能为行内元素分配大小:
This property does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children).
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>
关于html - 使 div 100px x 100px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34713618/