具有1个像素高度的列

我正在使用Gumby framework网格，并且存在列问题。我有以下代码：具有1个像素高度的列

<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; 
    } 
}

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

来源

2014-06-25 Jonfor

Gumby是否使用浮动列来显示其列？你的'img'有任何风格吗？将'display：block'添加到'img'并查看是否修复了它。如果不是，请尝试将其浮动。 – brouxhaha

我相信Gumby使用表格。显示：块没有工作。我将编辑我的问题以包含我拥有的CSS。 – Jonfor

你的CSS的语法不正确...（*除非你使用SASS或我不熟悉的东西*） –

似乎

位置：在图像上绝对

引起柱塌陷到1个像素。我不知道这是否仅仅是Gumby所拥有的，或者其他框架是否具有相同的框架，但是一旦我发现，我会更新这个答案。

来源

2014-06-25 17:58:59 Jonfor

这就是为什么我说你需要显式设置宽度-_- –

具有1个像素高度的列

回答

相关问题