标签: liquid-layout

我正在努力整理一个液体样式表,它很棒.我注意到的一件事是Chrome浏览器中的浏览器窗口不会调整到400px以下它只会卡在那里而在FF中我缩小它只是停在400px左右然后弹出一个水平滚动条.

当我在手机上打开网站时,它看起来很完美,大约是320px,所以我知道它的比例低于400px.

我很好奇,如果有人知道这是一个浏览器/桌面的东西,还是我应该看看我的CSS以外的东西.我没有任何最小宽度声明,所以我不确定是什么原因引起的.

再次在桌面上,它缩小到约400px的最小宽度并停止,但是当我在手机上打开它时,它会扩展到手机屏幕的大小,大约是320px ...好奇为什么至少它赢了在桌面上缩小到320像素.

-edit-而且我不确定这是否重要但Opera允许它缩小到几乎没有...所以它适用于Opera而不是Chrome或FF ...任何想法？

我希望我的容器div能够达到孩子身高的最大高度.不知道孩子div的身高.我正在试用JSFiddle.容器div是红色的.没有出现.为什么？

<ul class="entries">
  {% for post in paginator.posts %}
  <li>
    <a href="{{ post.url }}">
    <h3>{{ post.title }}</h3>
    <p class="blogdate">{{ post.date | date: "%d %B %Y" }}</p>
    <div>{{ post.content |truncatehtml | truncatewords: 60 }}</div>
    </a>
  </li>
  {% endfor %}
</ul>

这显示了我的所有帖子,我只想展示最新的帖子.

所以我尝试使用纯CSS,永不使用表格换布局福音,我真的有.但在经历了令人难以置信的痛苦和痛苦之后,我只是准备放弃了.我愿意付出一些努力来完成CSS中的事情,不要误会我的意思.但是当看起来像布局表中可以完成的一些最简单的事情在CSS 中完全不可能时,我不在乎概念纯度是否真的开始受到打击.

现在,我可能看起来很生气,而且我很生气; 我对我浪费的时间感到生气,我很生气从QuarkXpress背景中走出来的人给我带来无用的固定宽度设计,我对CSS失败的承诺感到生气.但我不是想开始争论; 我真的想知道一个简单问题的答案,这个问题将决定我是否会再尝试使用纯CSS的东西,或者在我想要的时候使用布局表.因为我讨厌回到布局表,认为这件事是不可能的,如果它实际上不是.

问题是:有没有办法使用纯CSS布局在左边有一个列,它是固定宽度的,在它右边放置一个数据表,并让数据表整齐地占用剩下的什么空间可用？也就是说,通过在左侧单元格上设置宽度为100%且固定宽度的双单元布局表,可以轻松实现相同的布局？

我正在Desk.com中构建一个"集成URL",它使用Shopify Liquid Template过滤器语法.此URL需要包含查询的"开始日期"和"结束日期",其中开始日期是7天前,结束日期是现在.

为了实现这一点,我想我需要从'now'对象中减去7天(大纪元时间604800),然后应用我的格式,但我无法找出有效的语法.

对于当前时间,此语法有效且有效: __CODE__

7天前,这是我能想到的最好的(不工作): __CODE__

关于Liquid中"7天前"的有效语法的任何建议？非常感谢任何建议!

我在我的博客上使用GitHub页面,并且遇到了Jekyll的问题.我的post.html有一个这样的块:

{%    for testpost in site.posts   %}
{%           four                  %}
{%          lines of               %}
{%         processing              %}
{%         goes here               %}
{%    endfor                       %}

中间的部分并不重要.重要的部分是在{% %}标记之外的行的结尾,因此被渲染到html中.由于这是一个循环,它在HTML页面的中间放置了大约1000个空白行.它不会影响显示,但会造成View/Source的麻烦.

关于如何避免这些额外空白线的任何想法？

我正在尝试在Jekyll重建一个博客,我已经找到了一个简单的任务.

如果我有以下模板集:

default.html中:

{{ head }}

{{ content }}

frontpage.html:

---
layout: default
---

{% capture head %}
  Frontpage
{% end %}

{{ content }}

index.html的:

---
layout: frontpage
---

Other stuff

我当时希望{% capture head %}将变量传递给布局.但似乎只有Front Matter的变量实际上被传递为page.variable_name.

有没有办法将capture-d var 传递给Jekyll的布局？

猜猜我可以制作2种不同的布局frontpage,normal_page这将取代布局中的整个{{head}}{{content}}块.但这就像html的两倍,所以capture如果可能的话我宁愿解决它.

我正在尝试创建我的第一个Jekyll网站,我遇到了设计i18n部分的问题.

对于每种语言,不同的文章将被完全重写,因此每篇文章都是不同的帖子,这里没有问题.我的布局/包含中的文本实际上有更多困难.

通常,对于菜单,我正在考虑按照以下方式做一些事情:

{% capture menu_location %}menu.{{ lang }}.html{% endcapture %}
{% include menu_location %}

建议喜欢这里.但这给了我以下错误:

在_includes目录中找不到包含的文件'menu_location'

是否可以为include标记使用变量？你知道我怎么能这样做吗？

谢谢 !

PS:即使我目前只考虑3种语言,我也不会用if/elseif/else语法来做;)

我想为我的营销网站制作一个3列布局,顶部横幅中有图像.

我希望液体左/右侧有一个固定的中心.理想情况下,html看起来像这样:

<div id="pixelLeft">&nbsp;</div>
<div id="bannerCenter">
  <img src="images/mybanner.png" />
</div>
<div id="pixelRight">&nbsp;</div>

<style>
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; }
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; }
#bannerCenter { /* something here to make fixed width of 1550px */ }
</style>

左/右像素侧的图像是1px×460px.图像mybanner.png是1550px x 460px.

提前致谢!(特别是如果它适用于所有浏览器!)

是否存在与blueprint/yui/960相同的活动/实体跨浏览器css框架,该框架支持基于百分比的液体布局？

我见过Emtastic,但它看起来好像已经活了大约一年了.您如何看待Matthew James Taylor的Liquid Layouts？