html - 基于 CSS 的网格错位问题

Question

下面是我的网格代码。我的目标是使用 css 制作一个简单且可配置的网格。但是网格有时会断裂或错位，您可以查看附加的图像以供引用。我不知道我是否遗漏了代码中的某些内容。

.grid {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}
.row {
    width: 100%;
    margin: 0 auto;
}
.grid:before,
.grid:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}
.grid:after,
.row:after {
    clear: both;
}
[class*='col-'] {
    width: 100%;
    float: left;
    min-height: 1px;
}
.col {
    margin: 0 10px;
}
@media screen and (min-width: 320px) {
   .col-sm-1 {width: 8.33333%;}
   .col-sm-2 {width: 16.66667%;}
   .col-sm-3 {width: 25%;}
   .col-sm-4 {width: 33.33333%;}
   .col-sm-5 {width: 41.66667%;}
   .col-sm-6 {width: 50%;}
   .col-sm-7 {width: 58.33333%;}
   .col-sm-8 {width: 66.66667%;}
   .col-sm-9 {width: 75%;}
   .col-sm-10 {width: 83.33333%;}
   .col-sm-11 {width: 91.66667%;}
   .col-sm-12 {width: 100%;}
 }
 @media screen and (min-width: 640px) {
   .col-md-1 {width: 8.33333%;}
   .col-md-2 {width: 16.66667%;}
   .col-md-3 {width: 25%;}
   .col-md-4 {width: 33.33333%;}
   .col-md-5 {width: 41.66667%;}
   .col-md-6 {width: 50%;}
   .col-md-7 {width: 58.33333%;}
   .col-md-8 {width: 66.66667%;}
   .col-md-9 {width: 75%;}
   .col-md-10 {width: 83.33333%;}
   .col-md-11 {width: 91.66667%;}
   .col-md-12 {width: 100%;}
 }
 @media screen and (min-width: 960px) {
   .col-lg-1 {width: 8.33333%;}
   .col-lg-2 {width: 16.66667%;}
   .col-lg-3 {width: 25%;}
   .col-lg-4 {width: 33.33333%;}
   .col-lg-5 {width: 41.66667%;}
   .col-lg-6 {width: 50%;}
   .col-lg-7 {width: 58.33333%;}
   .col-lg-8 {width: 66.66667%;}
   .col-lg-9 {width: 75%;}
   .col-lg-10 {width: 83.33333%;}
   .col-lg-11 {width: 91.66667%;}
   .col-lg-12 {width: 100%;}

下面是 HTML，数据是动态加载的

<div class="menu-container grid m-t-20" id="up_menu_container" style="padding-top: 47px;">
<div class="row up-column-3 up-item-container" data-category="686">
    <div data-id="14603" class=" item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="mint_oreo_crumble">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Mint-Oreo-Crumble_COMPRESSED.jpg" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type veg"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Mint Oreo Crumble
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">

                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14603">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-id="14608" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="butterscotch">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Butterscotch_COMPRESSED.jpg" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type no-type"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Butterscotch
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">

                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14608">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-id="14998" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="pineapple">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="images/icon/broken.png" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type no-type"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Pineapple
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">
                            ₹&nbsp;150<span class="price-descriptor"></span>
                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14998">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-id="14607" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="strawberry">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type no-type"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Strawberry
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">

                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14607">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-id="14609" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="vanilla">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Vanilla_COMPRESSED.jpg" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type no-type"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Vanilla
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">

                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14609">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-id="14610" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="cold_coffee">
        <div class="col relative-pos">
            <div class="up-item-image  loaded">
                <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Cold-Coffee_COMPRESSED.jpg" class="content">
            </div>
            <div class="up-item-others">
                <div class="title-desc-container">
                    <div class="title relative-pos div-table">
                        <div class="div-table-cell food-type-cell">
                            <div class="food-type no-type"></div>
                        </div>
                        <div class="div-table-cell item-title-cell">
                            Cold Coffee
                        </div>
                    </div>
                    <div class="item-desc small-text m-t-10 m-b-10">
                        <div></div>
                    </div>
                </div>
                <div>
                    <div class="item-pricing-btn-cnt">
                        <div class="bold item-price-text">

                        </div>
                        <div class="item-controller relative-pos top-inline-container" data-id="14610">
                            <div class="out-of-stock-text up-button small default secondary">
                                Out of stock
                            </div>
                            <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                                Add
                            </div>
                            <div class="m-l-10 added-item-add-delete">
                                <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                                    <i class="fa fa-caret-down"></i>
                                </div>
                                <div class="counter cart-button-toggle noselect">

                                </div>
                                <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                                    <i class="fa fa-caret-up"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

添加 img { 最大宽度:100%； } 防止图片超出父级的宽度，并添加 .row { display: flex; flex 包装:包装； 这样网格行的高度不均匀的元素就不会导致行错开。

img {
  max-width: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.row {
  width: 100%;
  margin: 0 auto;
}

.grid:before,
.grid:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}

.grid:after,
.row:after {
  clear: both;
}

[class*='col-'] {
  width: 100%;
  float: left;
  min-height: 1px;
}

.col {
  margin: 0 10px;
}

@media screen and (min-width: 320px) {
  .col-sm-1 {
    width: 8.33333%;
  }
  .col-sm-2 {
    width: 16.66667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33333%;
  }
  .col-sm-5 {
    width: 41.66667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333%;
  }
  .col-sm-8 {
    width: 66.66667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333%;
  }
  .col-sm-11 {
    width: 91.66667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

@media screen and (min-width: 640px) {
  .col-md-1 {
    width: 8.33333%;
  }
  .col-md-2 {
    width: 16.66667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333%;
  }
  .col-md-5 {
    width: 41.66667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33333%;
  }
  .col-md-8 {
    width: 66.66667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333%;
  }
  .col-md-11 {
    width: 91.66667%;
  }
  .col-md-12 {
    width: 100%;
  }
}

@media screen and (min-width: 960px) {
  .col-lg-1 {
    width: 8.33333%;
  }
  .col-lg-2 {
    width: 16.66667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33333%;
  }
  .col-lg-5 {
    width: 41.66667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33333%;
  }
  .col-lg-8 {
    width: 66.66667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33333%;
  }
  .col-lg-11 {
    width: 91.66667%;
  }
  .col-lg-12 {
    width: 100%;
  }

<div class="menu-container grid m-t-20" id="up_menu_container" style="padding-top: 47px;">
  <div class="row up-column-3 up-item-container" data-category="686">
    <div data-id="14603" class=" item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="mint_oreo_crumble">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Mint-Oreo-Crumble_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type veg"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Mint Oreo Crumble
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">

              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14603">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-id="14608" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="butterscotch">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Butterscotch_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type no-type"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Butterscotch
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">

              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14608">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-id="14998" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="pineapple">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type no-type"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Pineapple
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">
                ₹&nbsp;150<span class="price-descriptor"></span>
              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14998">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-id="14607" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="strawberry">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Strawberry_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type no-type"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Strawberry
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">

              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14607">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-id="14609" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="vanilla">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Vanilla_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type no-type"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Vanilla
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">

              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14609">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-id="14610" class=" hide-food-type item in-stock ordering-item relative-pos  col-sm-12 col-md-6 col-lg-4" data-title="cold_coffee">
      <div class="col relative-pos">
        <div class="up-item-image  loaded">
          <img src="https://s3-ap-southeast-1.amazonaws.com/asia.urbanpiper.com/media/bizmedia/l/2017/04/03/Classic-Shakes-Cold-Coffee_COMPRESSED.jpg" class="content">
        </div>
        <div class="up-item-others">
          <div class="title-desc-container">
            <div class="title relative-pos div-table">
              <div class="div-table-cell food-type-cell">
                <div class="food-type no-type"></div>
              </div>
              <div class="div-table-cell item-title-cell">
                Cold Coffee
              </div>
            </div>
            <div class="item-desc small-text m-t-10 m-b-10">
              <div></div>
            </div>
          </div>
          <div>
            <div class="item-pricing-btn-cnt">
              <div class="bold item-price-text">

              </div>
              <div class="item-controller relative-pos top-inline-container" data-id="14610">
                <div class="out-of-stock-text up-button small default secondary">
                  Out of stock
                </div>
                <div class="cursor-pointer small secondary-2 up-button default uppercase bold item-add-button item-add-type-2 m-l-10">
                  Add
                </div>
                <div class="m-l-10 added-item-add-delete">
                  <div data-combo="false" class="item-delete cursor-pointer cart-button-toggle large-text">
                    <i class="fa fa-caret-down"></i>
                  </div>
                  <div class="counter cart-button-toggle noselect">

                  </div>
                  <div class="item-add cursor-pointer cart-button-toggle item-add-button large-text item-add-type-2">
                    <i class="fa fa-caret-up"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>