具有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個像素高度的列

回答

相關問題