Question

我正在使用Gumby framework网格，但我遇到了列问题。我有以下代码：

<div class="row appointment-container"> 
    <div class="columns one">
        <img class="appt-calendar" src="appt.png">
    </div>

    <div class="columns eight">
        <div id="last-appointment">
            <h4 class="confirm-appointment next-block">
                <span class="appt-text">Lorem ipsum intellectus testus integer string float test test test</span>
            </h4>
        </div>
    </div>

    <div class="columns three">
    </div>
</div>

使用以下SCSS：

.appointment-container {

  position: relative;

  .appt-calendar {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

＆＃34;第8列＆＃34;和＃34;第三列＆＃34;正确显示，但＆＃34;列1＆＃34;尽管其中包含内容，但其高度仅为一个像素。会导致这种情况发生的原因是什么？

Answer 1

似乎

位置：绝对

图像上的

导致列折叠为1像素。我不知道这只是Gumby所拥有的，或者其他框架是否有相同的框架，但是一旦我发现，我会更新这个答案。

高度为1像素的列

1 个答案: