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下，但是它会破坏行并使slug在它下面有空的空间。

之前的

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

有什么方法可以做到这一点吗？我已经尝试过多种方法（将图像排成一行，不起作用。使用css使其成为背景图像，不起作用）。任何帮助将不胜感激。

Answer 1

这是一种可以实现您尝试做的事情的方式。对于移动布局，我认为它看起来很好，但对于桌面布局，您可以使用position将图片的absolute设置为@media-queries，以便在那里图像左侧没有空的空白区域。

这是一个演示（查看整页）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: