高度为 1 像素的列答案

【问题标题】：Columns with 1 pixel height高度为 1 像素的列
【发布时间】：2014-06-25 17:20:22
【问题描述】：

我正在使用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;
  }
}

“第八列”和“第三列”显示正确，但“第一列”的高度只有一个像素，尽管其中有内容。什么会导致这种情况发生？

【问题讨论】：

Gumby 的列是否使用浮点数？你的img 有什么风格吗？将display: block 添加到img 并查看是否可以解决问题。如果没有，请尝试浮动它。
我相信 Gumby 使用表格。显示：块不起作用。我将编辑我的问题以包含我拥有的 CSS。
你的 css 的语法不正确...（除非你使用的是 SASS 或者我不熟悉的东西）
那你需要为图片指定一个宽度。也请标记它有问题。
@Jonfor 确实为图像工作设置宽度..？

标签： css sass gumby-framework

【解决方案1】：

好像

位置：绝对

在图像上导致列折叠到 1 个像素。我不知道这是否只有 Gumby 有，或者其他框架是否有相同的框架，但我会在发现后更新这个答案。

【讨论】：

这就是为什么我说你需要明确设置宽度-_-