Question

我正在使用Ruby on Rails并试图设计商店的首页。有普通的和突出的产品。普通产品约为200x200px，高亮产品为450x450px。我正在尝试将我的页面划分为5列，以便每行至少有三个普通图像。我希望高亮图像能够在网格的每次“迭代”时向右移动一列：类似于this 目前我正在获得很多像this这样的空白空格。在显示大图像后，小图像没有像我想要的那样堆叠。

我知道jQuery / javascript会解决这个问题，而且Masonry是一个很好用的宝石，但是，如果可能的话，我想用CSS做这个，因为我是一个完整的初学者用javascript。对此有任何帮助将非常感激。

HTML：

    <div class ="section group">
    <div class = "grid_two">
        <% (@front_page_objects_2).shuffle.each do |item| %>
            <% if item.is_a?(Subcategory) %>
                <% if item.is_highlight_product %>
                    <%= link_to image_tag(item.image_attachment.url(:large_page_size)), subcategories_content_url(item.id), :controller=>'subcategories', class: 'highlight col' %>
                <% else %>
                    <%= link_to image_tag(item.image_attachment.url(:normal_page_size)), subcategories_content_url(item.id), :controller=>'subcategories', class: 'event col' %>
                <% end %>
            <% elsif item.is_a?(Product) %>
                <div class="column_entry">
                    <div class="product_special">
                        <span class="a"><%=(item.price_from) ? 'From Only' : 'Only'%></span>
                        <span class="b"><%= number_to_currency(item.price,:unit=>'€') %></span>
                    </div>
                    <%= link_to image_tag(item.product_image.url(:normal_page_size)), products_content_url(item.id), :controller=>'products', class: 'product col' %>
                </div>
            <% end %>           
        <% end %>       
    </div>
</div>

CSS：

    .grid_two{

    width: 95%;
    display: inline-block;
    float: none;        

    .event, .product{

        display: block;

        padding: 0px;
        margin: 0px;

        img{

            width: 200px;
            height: 200px;
        }

        a img{

            width: 200px;
            height: 200px;
        }           
    }

    .highlight{

        display: block;
        padding: 0px;
        margin: 0px;

        img{

            width: 450px;
            height: 450px;
        }

        a img{

            width: 450px;
            height: 450px;
        }
    }       
}
    .section{

    clear: both;
    padding: 0px;
    margin: 0px;
}

.col{
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.col:first-child{ margin-left: 0;}

.group:before,

.group:after{
    content: "";
    display: table;
}

.group:after{
    clear:both;
}

不同大小的图像网格 - 仅限CSS

0 个答案: