Question

我有以下代码块：

<div class="1">
  Foo<br>1
</div>
<div class="2">
  Bar<br>2
</div>

.1和.2都设置为position:relative;display:inline-block。但是，它们显示如下：

     Bar
Foo  2
1

显然，课程.2垂直放置在它自然的位置，但是课程.1的第一行从.2的第二行开始，所以整个div被推倒了。这对我来说似乎很奇怪，因为.2位于.1之后，所以我希望.2根据.1的位置来定位，而不是相反。当我在.1之前添加更多div时，此模式会继续。我怎样才能让他们直接展示，像这样？

Foo Bar
1   2

Answer 1

与其他人一样，1和2不适用于班级名称;我已将它们分别更改为a和b。并且他们也是正确的，你的CSS是嵌套的，但你没有为你的小提琴选择SCSS，所以这是无效的CSS。解决这两件事情并且有效：

.wrapper { position: relative; display: inline-block; }
.a, .b { position: relative; display: inline-block; }

<div class="wrapper">
  <div class="a">
    Foo<br>1
  </div>
  <div class="b">
    Bar<br>2
  </div>
</div>

另外，请忽略有关使用表格和浮点数的建议。它们没有错，但它们不会明确修复代码中的错误。

Answer 2

如果希望元素按照示例中所示进行对齐，则可以使用float或inline-block。

.class1 {
    display: inline-block;
}
.class2 {
    float: left;
}

<div class="class1">Foo
    <br />1</div>
<div class="class1">Bar
    <br />2</div>
<hr />
<div class="class2">Foo
    <br />1</div>
<div class="class2">Bar
    <br />2</div>

请注意，您使用的是无效的类名，请参阅规范here。简而言之，类名必须以下划线（_），连字符（ - ）或字母（a-z）开头，后跟任意数量的连字符，下划线，字母或数字。此外，如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且名称长度必须至少为2个字符。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码。

如何让内联块元素直接打印？

2 个答案: