html - 如何在 Zurb-Foundation 中使图像跨越多行？

Question

我正在尝试通过 Foundation 创建一个页面，让用户可以发布文章，但是我遇到了问题。页面如下所示: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 下，但它会打断该行并使 slug 下面有空白空间。

Here's an image之前的，所以你可以比较。我希望图像位于 Topstory Image Preview 下，但我不希望它在 Slug 输入栏下方创建不必要的空间。

有什么办法可以做到这一点吗？我已经尝试了多种方法(将图像从行中对齐，不起作用。使用 css 使其成为背景图像，不起作用)。任何帮助将不胜感激。

Answer 1

这里有一种方法，您可以使用它来实现您想要做的事情。对于移动布局，我相信它看起来不错，但对于桌面布局，您可以使用 @media- 将图像的 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>