如何在Zurb基金會中創建一個跨越多行的圖像？

Question

我想通過基金會讓一個頁面讓用戶發表文章，但是，我遇到了問題。以下是該頁面的樣子：http://jsfiddle.net/60a2g5fn/（請務必展開查看窗口，否則它會認爲您處於移動瀏覽器中）

我需要在JSFiddle鏈接後發佈代碼，所以這裏是什麼關聯的輸入/行看起來像。

<div class="row"> 
    <div class="large-6 columns"> 
     <label>Title 
      <input type="text" name="HK_NEWS_TITLE"> 
     </label> 
    </div> 
    <div class="large-6 columns"> 
     <label>Topstory Image</label> 
     <select name="HK_NEWS_IMAGE">       
     </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="large-3 columns"> 
     <label>Slug 
      <input type="text" name="HK_NEWS_SLUG"> 
     </label> 
    </div> 
    <div class="large-6 columns"> 
     <label>Topstory Image Preview</label> 
     <img src="http://www.pattiknows.com/wp-content/uploads/2014/08/love-man-woman-silhouette-sun-sunset-sea-lake-beach-300x187.jpg"> 
    </div> 
</div> 

下拉是他們可以選擇使用PHP和Javascript從圖像目錄中選擇和追加圖像的圖像。一旦他們選擇了圖像，它會被附加到Topstory Image Preview下，但它會打破這一行，並使得slu have下面有空的空間。

Here's an image的之前，所以你可以比較。我希望圖像在Topstory Image Preview下，但我不希望它在Slug輸入欄下面創建不必要的空間。

有沒有什麼辦法可以做到這一點？我已經嘗試了多種方法（將圖像從行中對齊，不起作用，使用css使其成爲背景圖像，不起作用）。任何幫助，將不勝感激。

Answer 1

以下是一種使用它可以實現你想要做的事情的方法。對於移動版式，我相信它看起來很好，但對於桌面版式，您可以使用@media-queries將圖像的position設置爲absolute，以便在圖像的左側沒有空白空間。

這裏有一個演示（查看整頁）：

@media (min-width: 1025px) { 
 
    img#ts-preview { 
 
    position: absolute; 
 
    } 
 
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css" rel="stylesheet" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.min.css" rel="stylesheet" /> 
 
<form method="POST" action="news"> 
 
    <div class="row"> 
 
    <div class="large-6 columns"> 
 
     <label>Title 
 
     <input type="text" name="HK_NEWS_TITLE"> 
 
     </label> 
 
    </div> 
 
    <div class="large-6 columns"> 
 
     <label>Topstory Image</label> 
 
     <select name="HK_NEWS_IMAGE"></select> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="large-3 columns"> 
 
     <label>Slug 
 
     <input type="text" name="HK_NEWS_SLUG"> 
 
     </label> 
 
    </div> 
 
    <div class="large-6 columns"> 
 
     <label>Topstory Image Preview</label> 
 
     <img id="ts-preview" style="padding-bottom:20px;" src="http://www.pattiknows.com/wp-content/uploads/2014/08/love-man-woman-silhouette-sun-sunset-sea-lake-beach-300x187.jpg"> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="large-6 columns"> 
 
     <label>Short Story 
 
     <input type="text" name="HK_NEWS_SHORT"> 
 
     </label> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="large-6 columns"> 
 
     <label>News Content</label> 
 
     <textarea name="HK_NEWS_CONTENT"></textarea> 
 
    </div> 
 
    </div> 
 
</form>