波本威士忌 - 整齐 - 交替的左/右 - 右/左列 - 相同的DOM结构

我最近开始研究波旁和整洁使用我的个人网站和潜在的未来项目。波本威士忌 - 整齐 - 交替的左/右 - 右/左列 - 相同的DOM结构

我正在尝试重新创建一个交替的从左到右，从右到左的布局。与此类似：http://www.plunkettassociates.co.uk/services/

哪里有48％的文本列，其后是带图像的48％的列。然后这个布局在页面上向左和向右交替。关键的DOM结构是一样的。 CSS用于操纵48％列和页边空白的位置。

有人可以解释如何使用整齐实现这种交替布局？

2014-09-04 Markus Von Plunkett

我不能评论如何使用整齐，但引用的网站使用偶/类来确定哪些应该在哪一边。对文档的快速扫描并没有显示任何特定的内容，但我认为使用Sass mixin可以相对容易地完成它。 – brennebeck 2014-09-04 12:30:19

在问您如何使用Bourbon/Neat做这件事之前，您是否花时间考虑编译后的CSS需要创建这样的布局？（请参阅：http://stackoverflow.com/questions/17298799/table-style-layout-with-alternating-reversed-rows-and-without-markup-for-rows） – cimmanon 2014-09-04 15:00:25

感谢您的意见。我认为是的。在这里引用你的答案：http://stackoverflow.com/a/17299816/4007578你知道如何使用Bourbon/Neat实现这个目标吗？ – 2014-09-04 16:25:14

如果你想使用波本/尼特来模拟这种布局。你必须知道一些事情：

有一个行的容器，在你分享的url中，___标签有这个角色。
您可以使用整齐的主题响应它的两列。在示例中，col-1-2类标记。

Neat提供了一些用于此目的的mixin。 外容器和跨度柱：

例如，可以通过这个代码模拟此：

<div class="row"> 
    <div class="column"></div> 
    <div class="column"></div> 
</div>

的萨斯代码，用纯的。假设您的页面中有12列：

.row { 
    @include outer-container; 
} 

.column { 
    @include span-columns(6); 
}

最后，对图像的影响很容易，只需要一个具有负值的边距。在这个例子中是一个-80px的margin-top：

问候。

来源

2014-09-04 14:47:36

非常感谢。通过阅读文档，我了解如何使用span-columns。它真的很高兴与:) 我的问题是更多如何使用Neats mixins来实现交替布局，同时保持相同的DOM结构作为引用在这里：http://stackoverflow.com/questions/17298799/table-style-布局与 - 交流反相行和 - 不差率换行 – 2014-09-04 16:32:19

波本威士忌 - 整齐 - 交替的左/右 - 右/左列 - 相同的DOM结构

回答

相关问题