CSS/SASS 使用兄弟姐妹身高

Question

在 SASS 中有没有办法让元素继承其兄弟姐妹的高度，以便它们排在水平线上？

<div class="first">A bunch of content in here<div>
<div class="sibling"><div>

.first {
    height: auto;
    + second { 
       height: use .first height;
    }
}

Answer 1

没有。想想 SASS 的工作方式 - 你的 height: auto 将被编译成 CSS 就像 height: auto 一样。 Sass 无法知道结果是什么数字，因此它无法为您的第二个元素分配特定值。（它只能再次赋值height: auto，这可能是也可能不是你想要的值）。

Answer 2

你不能让它们的高度相同，但你可以确保它们都在行内对齐，这可能会实现你想要的外观（如果不知道你到底想做什么，很难确定):

.aligned-row {
    display:flex;
    align-items:center;
}

这是较新的 CSS，因此不完全向后兼容：

有关 display:flex 的更多信息可在此处找到：vertical-align with Bootstrap 3

CSS/SASS 使用兄弟姐妹身高

CSS/SASS Use Siblings Height

css

sass