布尔玛迪夫尺寸继承祖父母的

Question

我正在使用bulma作为CSS框架，我有一些看起来像下面的东西：

<div class="columns is-gapless">
<div class="column is-four-fifths carte" id="column1">
<div class="viewer">
...
</div>
</div>
<div class="column is-flex is-fullheight" id="column2">
...
</div>
</div>

在我的 CSS 中，我有：

div.viewer{
height: 100%;
width: 100%;
}

我面临的问题是我的类查看器固有了列的高度，而不是来自他的父级"column1"。 最后，我的类查看器与我的第二列("column2"(重叠，这不是预期的行为。我希望我的元素查看器留在列 1div 内。

如果我想让我的观众的位置从我#column1的右边框变成 20px，我也有同样的问题：

div.viewer{
...
position: absolute;
right: 20px;
}

但是，查看器距离浏览器窗口的右边框 20px，而不是我的#column1

Answer 1

不确定 Bulma 但即使有一个准系统示例，无论它有多大，查看器类都会留在 column1 内。(我添加了显示：flex;只是为了水平对齐列和视觉效果的一些边框(

.column-container {
display: flex;
padding: 5px;
border: 2px solid black;
}
#column1 {
border: 2px solid blue;
}
.viewer {
width: 100px;
height: 100px;
background-color: gray;
border: 2px solid red;
}
#column2 {
border: 2px solid green;
}

<div class="column-container">
<div id="column1">
<p>col 1</p>
<div class="viewer">
<p>viewer</p>
</div>
</div>
<div id="column2">
<p>col 2</p>
</div>
</div>

Answer 2

我终于通过设置#column1的位置解决了这个问题。我的解决方案是：

div#column1{
position: relative;
}