首页 \ 问答 \ 在Skeleton Framework中更改行之间的空格。(changing spaces between rows in Skeleton Framework.)

在Skeleton Framework中更改行之间的空格。(changing spaces between rows in Skeleton Framework.)

现在我有两个使用“半列”类的div。

正如您在此处看到的那样,左侧的底部卡片仍然与右下角的卡片对齐。 在此处输入图像描述

我想像这样的Pinterest风格,但我不知道是怎么回事,因为它们在不同的行中。 在此处输入图像描述

这是我的HTML代码。

<div class="container">
<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Stealth Rats</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
    </div>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
    </div>
  </div>
</div>

<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 5%">
  <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 5%">
   <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>

提前致谢!


Right now I have two divs using "one-half columns" class.

As you can see here, the bottom card on the left side is still aligned with the one on the bottom right. enter image description here

I want Pinterest kind of style like this, but I do not know how because they are in different rows.enter image description here

here is my html code.

<div class="container">
<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Stealth Rats</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
    </div>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
    </div>
  </div>
</div>

<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 5%">
  <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 5%">
   <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>

Thanks in advance!


原文:https://stackoverflow.com/questions/36878559
更新时间:2022-01-13 20:01

最满意答案

使用循环模块。 然后在其中间放置一个String Builder模块。 将item.hhvac:employerName放在第一个字段中,单击加号以获取另一个字段,将放在该字段中,再次单击加号以获取另一个字段,然后将item.title放在该字段中

然后将item.title作为“将结果分配给:”的值(并选中它旁边的单选按钮)。


Use the Loop module. Then put a String Builder module in the middle of it. Put item.hhvac:employerName in the first field, click plus to get another field, put : in that field, click plus again to get another field, then put item.title in that field

Then put item.title as the value for "Assign results to:" (and check the radio button next to it).

相关问答

更多
  • 标题的正则表达式: (?i).*?([^<]*).* [ ] g [x] s [ ] m [ ] i RegEx的链接: (?i).*?href="([^"]*).* [ ] g [x] s [ ] m [ ] i 不知何故,不区分大小写的复选框似乎破裂。 幸运的是,你可以用(?i)替代,这很好地工作。 这里有一个很好的web2.0-ish工具来测试正则表达式: RegExr 。 但由于某种原因,它仍然是测试版。 ;-) RegEx f ...
  • 使用循环模块。 然后在其中间放置一个String Builder模块。 将item.hhvac:employerName放在第一个字段中,单击加号以获取另一个字段,将:放在该字段中,再次单击加号以获取另一个字段,然后将item.title放在该字段中 然后将item.title作为“将结果分配给:”的值(并选中它旁边的单选按钮)。 Use the Loop module. Then put a String Builder module in the middle of it. Put item.hhvac ...
  • 你可以使用这个正则表达式: http:\/\/t.co\/[^\s]+ http://regex101.com/r/pK6lW5 You can use this regex: http:\/\/t.co\/[^\s]+ http://regex101.com/r/pK6lW5
  • 我对你正在做的事情并不熟悉,但我会先尝试删除标签,以便进行逃生。 我的意思是看<strong> 或努力确保您走在正确的轨道上。 我认为问题的根源在于,您似乎正在尝试匹配许多>而不是标签之间的实际内容。 尝试使用.*? (或者[^ <] *?如果你知道标签中没有其他标签)。 I'm not familiar with what you are doing exactly, but I would first try just removing the
  • 简单地改变: thefeeds[i].pubDate 至: thefeeds[i].publishedDate 我在Google Code Playground上测试了这个: https://code.google.com/apis/ajax/playground/#load_feed 在OnLoad ,将URL更改为Yahoo Pipes链接 在feedLoaded的主循环中,编辑中间部分: div.appendChild(document.createTextNode(entry.title)); ...
  • 你需要_callback不是普通的callback You need _callback not plain callback
  • 你目前被卡住了。 至少截至2009年9月2日, Yahoo Pipes不支持https 。 有可能设置你自己的代理服务器为你做SSL提取,并通过http重新提供内容,但这不是我曾经尝试过的。 You are currently stuck. As of 2/09/09 at least, Yahoo Pipes does not support https. There is the possibility of setting up your own proxy server to do the SSL ...
  • 如你所想的那么快,使用Yahoo管道的最好方式就是想像你在制作Unix管道时所做的那样 - 在这里,显而易见的Unix管道将是头部尾巴,而Yahoo管道方法是完全相似的(除了通过'truncate'的名称来称呼'head')他们会在你的方式中设置一些障碍;-)。 As you figured out so rapidly, the best way to work with Yahoo pipes is to think much like you would when making up a Unix p ...
  • Pipes文档表示它尊重标准的HTTP过期标头 ,因此它取决于您的源标头。 然而,也有一个最小间隔, 这篇文章声称它是大约10分钟。 The Pipes docs says it honors the standard HTTP expiration headers, so it depends on your sources' headers. However, there is also a minimum interval, this post claims it's around 10 minute ...
  • 是的,您可以使用正则表达式模块插入一些文本。 一些例子: 简单插入 如果您的头衔是AAACCC并且您想插入BBB以获得AAABBBCCC , 更换 AC 同 ABBBC 简单追加 如果您的头衔是AAACCC并且您想附加BBB以获得AAACCCBBB , 更换 $ 同 BBB 插入捕获组 对于更复杂的情况,您可以使用捕获组。 例如,假设您的标题由开头的一些字母和末尾的一些数字组成,如Oct2009 。 而且你想用一个斜线分隔字母和数字,比如2009年10月 更换 ([A-ZA-Z] +)([0-9] +) 同 ...

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)