Question

我正在尝试创建一个div，它是通过添加多个类创建的。出于特殊原因，宽度，高度和尺寸将不会设置。相反，它们是自动尺寸。当我将所有内容添加到一个类，大小和这样的工作时，但如前所述，在分离时，他们将不会做任何事情。

我是如何创建多类div的（尝试过对类进行改组）

<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>

在CSS文件中：

.pos1{
    display: inline; float:left;
}

.1x1 {
    width:13.5vw;
    height:13.5vw;
}

.1x2 {
    width:13.5vw;
    height:17.5vw;
}

.2x2 {
    width:17.5vw;
    height:17.5vw;
}

div.box{
    background-color:#000000; color: white;
    margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
    border: white solid 2px;  
}

同时创建一个大班也不是一个选择。

谢谢。

Answer 1

以数字开头的班级名称无效！您的班级名称必须以_，-或字母（a-z）开头！

验证班级名称的模式：-?[_a-zA-Z]+[_a-zA-Z0-9-]*

https://www.w3.org/TR/CSS21/grammar.html#scanner

请参阅以下解决方案：

.pos1{
  display:inline; 
  float:left;
}
.size1x1 {
  width:13.5vw;
  height:13.5vw;
}
.size1x2 {
  width:13.5vw;
  height:17.5vw;
}
.size2x2 {
  width:17.5vw;
  height:17.5vw;
}
div.box{
  background-color:#000;
  color:#fff;
  margin:0 0.25vw;
  border:2px solid #fff;  
}

<div class="box pos1 size1x1">
  <p class="verdana"> ... </p>
</div>

Answer 2

由于其他提到的班级名称不能以数字开头，而在pos1中，您将div显示为inline。内联元素没有高度，应使用inline-block。

HTML CSS多个类未设置宽度/高度/大小

2 个答案: