用于产品概述电子商务的动态CSS网格

时间：2015-11-22 11:19:29

标签： javascript css grid e-commerce

我试图找出一种方法来制作一个动态的CSS网格来填充整个＆＃34;行＆＃34;即使没有真正的行。正如你在我的小提琴中所看到的那样，我已经将广告作为标记中的第10个孩子放入了新的（第3个）＆＃34;行＆＃34;这导致＆＃34;行＆＃34;以上，这是预期的行为，我理解为什么会这样。

我的问题是，是否有一些聪明的方法来获得每一个＆＃34; row＆＃34;填写没有像泥工这样的javascript库。我一直在玩各种不同类型的伪选择器但仍然成功。

main {
  width: 1000px;    
}

article {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  padding-left: 12px;
  padding-right: 12px;
    margin-bottom: 20px;
}

.ad {
  width: 40%;
}

这是一个JSFiddle链接： https://jsfiddle.net/3w7qysn8/

1 个答案:

答案 0 :(得分：0)

在这里，您有一个可以满足您需求的解决方案。我更改了ul和li，以显示没有它们的方式。如果您更喜欢列表样式，请简单地将它们放回去。

这个小提琴得到了很好的评论，有了它（请务必调整浏览器窗口的大小）...... 

/**********************************************/
/* Globals                                    */
/**********************************************/
@import url("http://fonts.googleapis.com/css?family=Work+Sans");

html, body                  { box-sizing: border-box; height: 100%; width: 100%;
                              margin: 0px; padding: 0px; border: 0px; cursor: default }

body                        { font-family: 'Work Sans', Helvetica, Arial, sans-serif;
                              -webkit-user-select: none; -moz-user-select: none; 
                                  -ms-user-select: none;      user-select: none }

*, *:before, *:after        { box-sizing: border-box }

/* *                         { outline: 1px dashed red } /* just for debugging */

/**********************************************/
/* RESPONSIVE COMPONENT BOX default rules     */
/**********************************************/
.rcb { /* [MANDATORY] Main 'Responsive Component Box' container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    min-width:  330px;  /* [OPTIONAL] MDL, best value is a multiple or division of 330x200 (200x330) for all types of devices */
    min-height: 200px;  /* [OPTIONAL] ditto */
    width: 100%;        /* [OPTIONAL] Maximum width within parent element */
    height: auto;       /* [OPTIONAL] Adjust height to child element needs */
    padding: 15px;      /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */
}
.rcb-center {
    margin: 0 auto
}

.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within parent frame*/

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */

    /* FLEX: is the base rule for all box items, */
    flex: 1 1 176px;    /* add auto or 0, or add some min required width (fiddle away!) */

    min-width:  176px;  /* best value is a division of parent width for all types of devices */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis (flex: n n basis)! */


    max-width:  100vh;  /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100vh;  /* ditto */
    margin: 10px;        /* nice little space between boxes (See MQ) */

    overflow: hidden;   /* Chop off outside content */

    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.2); transition: all 75ms ease;

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */

   /* border:  1px solid transparent; *//* smoothing (for skewed/irregular/3D items) */
   /* or outline: 1px solid transparent; */
}
.rcb-cmp-item img {
    display: block }    /* remove the gap below image elements 
                           (by default, IMG is an inline element and cause bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/**********************************************/
/* RESPONSIVE COMPONENT BOX exceptions/extras */
/**********************************************/

.ad {
    /* exception to the base rule of 176px */
    flex: 1 1 376px;    /* grow and shrink with base width of 376px */
}

.rcb-cmp-item:hover { /* [OPTIONAL], obviously */
    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.5);
    transform: scale(1.05)
}

/**********************************************/
/* standard element styling                   */
/**********************************************/

#main {
    max-width: 1000px;  /* main container, smaller if so required by device */
    margin: 0 auto;     /* center horizontally */
}

.ad {
    background-color: rgba(255,193,7,1); color: rgba(0,0,0,.87); /* MDL black on amber */
}
<main id="main" role="main" class="rcb">    
    <div class="rcb-cmp-list">
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item ad"><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/376x200">Adverts</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
    </div>
</main>

相关问题
最新问题