0

我开始从在 Foundation 3 代码上运行的 Reverie 的基础上设计一个 Wordpress 主题。我以前创建过主题，但我试图了解网格方法，特别是如何最好地实现排水沟。

问题：

在此处查看我的测试站点http://diskbacker.com/

我有带有背景颜色的内容 div 和侧边栏 div 来显示问题。默认情况下，它们会相互接触。

  1. 如何在内容 div 和侧边栏 div 之间添加分隔符？

  2. 如何向内容和侧边栏添加内部填充？

  3. 当我要“响应”时，这种分离会导致移动设备出现问题吗？

提前致谢。

4

2 回答 2

1

如果您在列内放置另一个 div 作品...

<div class="four columns">
<div style="margin:25px; background: #ccc;">test</div></div>
<div class="eight columns">eight</div>

您还可以在基础中查找类 .panel 并适应您的特定需求：

.panel { background: #f2f2f2; border: solid 1px #e6e6e6; margin: 0 0 22px 0; padding: 20px; } 
.panel > :first-child { margin-top: 0; } 
.panel > :last-child { margin-bottom: 0; }

或者 - 使用基础 v2

于 2013-03-06T14:48:11.060 回答
0

我建议首先阅读 ZURB Foundation 文档，其中解释了网格的用法：

http://foundation.zurb.com/docs/grid.php

只需在列上填充填充即可创建排水沟。这意味着列具有简单的宽度，例如 25% 或 50%。调整 padding 可以调整装订线，这可以通过 Scss 变量、下载定制器或 CSS 本身来控制。

与任何 HTML/CSS 站点一样，您可以识别要修改的元素的选择器，并在自定义 CSS 样式表中识别该元素的填充，例如：

.sidebar {padding:14px;}

希望有帮助。

于 2013-01-23T09:26:49.777 回答