我正在尝试动态填充无框架网格(使用 Rails 循环)，但效果并不理想。
我了解 LESS 以及使用 @1col(@2cols 等)作为变量的概念。但是网站上提供的示例(或者更确切地说，嵌入在网站 framelessgrid.com/中的示例)显示了使用大量硬编码列的情况。
以下是framelessgrid.com的部分代码
更少的文件:
@font-size: 17;
@line: 24;
@em: @font-size*1em;
@column: 48;
@gutter: 24;
@1col:( 1 * (@column + @gutter) - @gutter) / @em;
@1cols: @1col;
@2cols:( 2 * (@column + @gutter) - @gutter) / @em;
@3cols:( 3 * (@column + @gutter) - @gutter) / @em;
@4cols:( 4 * (@column + @gutter) - @gutter) / @em;
@5cols:( 5 * (@column + @gutter) - @gutter) / @em;
@6cols:( 6 * (@column + @gutter) - @gutter) / @em;
@7cols:( 7 * (@column + @gutter) - @gutter) / @em;
@8cols:( 8 * (@column + @gutter) - @gutter) / @em;
@9cols:( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;
.width (@cols:1) {
width: (@cols * (@column + @gutter) - @gutter) / @em;
}
//....
article section, #colophon {
padding: 0 18/@em;
margin: 0 auto;
max-width: @8cols;
}
#grid {
height: @4cols;
position: relative;
overflow: hidden;
}
.col {
background: @highlight;
height: 100%;
width: @1col;
position: absolute;
left: 50%; top: 0;
margin-left: 12/@em;
}
#grid .col {
.transition(background-color 0.382s ease-out);
}
.col2 {margin-left: (1*72+12)/@em;}
.col3 {margin-left: (2*72+12)/@em;}
.col4 {margin-left: (3*72+12)/@em;}
.col5 {margin-left: (4*72+12)/@em;}
.col6 {margin-left: (5*72+12)/@em;}
.col7 {margin-left: (6*72+12)/@em;}
.col8 {margin-left: (7*72+12)/@em;}
.col9 {margin-left: (8*72+12)/@em;}
.col10 {margin-left: (9*72+12)/@em;}
.col11 {margin-left: (10*72+12)/@em;}
.col12 {margin-left: (11*72+12)/@em;}
.col13 {margin-left: (12*72+12)/@em;}
.col14 {margin-left: (13*72+12)/@em;}
.col15 {margin-left: (14*72+12)/@em;}
.col16 {margin-left: (15*72+12)/@em;}
.col17 {margin-left: (16*72+12)/@em;}
.col18 {margin-left: (17*72+12)/@em;}
.col19 {margin-left: -(1*72-12)/@em;}
.col20 {margin-left: -(2*72-12)/@em;}
.col21 {margin-left: -(3*72-12)/@em;}
.col22 {margin-left: -(4*72-12)/@em;}
.col23 {margin-left: -(5*72-12)/@em;}
.col24 {margin-left: -(6*72-12)/@em;}
.col25 {margin-left: -(7*72-12)/@em;}
.col26 {margin-left: -(8*72-12)/@em;}
.col27 {margin-left: -(9*72-12)/@em;}
.col28 {margin-left: -(10*72-12)/@em;}
.col29 {margin-left: -(11*72-12)/@em;}
.col30 {margin-left: -(12*72-12)/@em;}
.col31 {margin-left: -(13*72-12)/@em;}
.col32 {margin-left: -(14*72-12)/@em;}
.col33 {margin-left: -(15*72-12)/@em;}
.col34 {margin-left: -(16*72-12)/@em;}
.col35 {margin-left: -(17*72-12)/@em;}
.col36 {margin-left: -(18*72-12)/@em;}
.col1, .col2, .col3, .col4, .col19, .col20, .col21, .col22 {
background: @emphasis;
}
HTML 文件:
<article>
<figure id="grid">
<div class="col col1"></div>
<div class="col col2"></div>
<div class="col col3"></div>
<div class="col col4"></div>
<div class="col col5"></div>
<div class="col col6"></div>
<div class="col col7"></div>
<div class="col col8"></div>
<div class="col col9"></div>
<div class="col col10"></div>
<div class="col col11"></div>
<div class="col col12"></div>
<div class="col col13"></div>
<div class="col col14"></div>
<div class="col col15"></div>
<div class="col col16"></div>
<div class="col col17"></div>
<div class="col col18"></div>
<div class="col col19"></div>
<div class="col col20"></div>
<div class="col col21"></div>
<div class="col col22"></div>
<div class="col col23"></div>
<div class="col col24"></div>
<div class="col col25"></div>
<div class="col col26"></div>
<div class="col col27"></div>
<div class="col col28"></div>
<div class="col col29"></div>
<div class="col col30"></div>
<div class="col col31"></div>
<div class="col col32"></div>
<div class="col col33"></div>
<div class="col col34"></div>
<div class="col col35"></div>
<div class="col col36"></div>
</figure>
</article>
因此，类为 col2 到 col18 的列开始出现在屏幕中间并向右移动，从 сcol19 到 col36 的列从中间向左移动。
如何将这个概念用于动态创建列？
我想做这样的事情:
<figure id="grid">
<% My_model.all.each do |m| %>
<div class="col col1"> <%= m.content %> </div>
<% end %>
</div>
然而，这将从屏幕中间开始填充网格(由于 .col 中的 CSS):
.col{left: 50%;}
当然我可以切换到 left:0 但这有点否定了 Frameless 的概念(Framelessgrid.com 中的第 3 部分:
- Center it in the viewport. Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.
那么除了从循环中动态创建/填充列之外，我该如何坚持这个概念呢？
最佳答案
所以既然这个问题得到了投票..
以下是我如何通过 Rails erb 代码重新创建网格(保持绝对定位)。我需要一个大约 12 列宽的列，所以我只是向左和向右循环。
添加到 LESS 文件:
.contain{
width: @6cols;
height: @2cols;
margin-bottom: @gutter/@em;
}
Controller :
def index
@counter = 0
@ticker = 0
end
HTML:
<figure id="grid">
<% MyModel.all.each_with_index do |p, i| %>
<div class = "contain" >
<% @counter = @counter + 2 %>
<div class="col col<%= @counter %>" id ="message_text"> <%= @counter %> || <%= i %>
</div>
<% if @counter == 5 %>
<% @counter = 18 %>
</div>
<div class ="return"></div>
<% elsif @counter == 24 %>
<% @counter = -1 %>
<% if @ticker == 0 %>
</div>
<div class ="return"></div>
<% end %>
<% end %>
<% @ticker = 1 %>
<% end %>
</figure>
然而，这是一个更好的(更真实的)例子，做一个固定宽度的列响应网格:
更少的文件:
@column: 85; // The column-width of your grid in pixels
@gutter: 20; // The gutter-width of your grid in pixels
@half_gutter : @gutter / 2;
@model_fix : 7.5/@em;
#build figure {
height: 100%;
background: @background;
position: absolute;
overflow: none;
margin: 0 @gutter/@em;
}
#build .col {
float: left;
left: 0;
background: white;
}
.col {
height: @1col;
width: @1col;
position: absolute;
margin: 0 @half_gutter/@em @gutter/@em @half_gutter/@em;
}
@media screen and (min-width: 78.750em) {
.offset {
left: 50% - @8cols ;
}
#build figure {
height: 100%;
background: @background;
position: relative;
overflow: none;
margin: 0 auto 0 (@half_gutter - 4)/@em;
width: @12cols + @gutter/@em;
}
}
.message_text .col {
width: @2cols;
height: @2cols - @model_fix*2;
position: relative;
color: @grey_text;
}
.message_text #mess_text{
font-size: 14/@em;
margin: @half_gutter / @em;
}
HTML 文件:
<body>
<article>
<section id="build">
<figure id = "models" class ="offset">
<% @scenes.each_with_index do |s, i | %>
<div class ="message_text ">
<div class="col">
<div id = "model_text" >
<%= link_to s.title, scene_path(s) %>
</div>
</div>
</div>
<% end %>
</figure>
</section>
</article>
</body>
关于html - 如何动态填充无框网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12029732/