文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将div结构转换为列表视图的单行

问将div结构转换为列表视图的单行
EN

Stack Overflow用户
提问于 2019-06-29 05:17:41
回答 1查看 243关注 0票数 0

我有一个网格视图(使用flex box方法)，我想使用样式表和j query/java脚本将其更改为列表视图。问题:由于在网格视图方法中，所有元素都在单独的div中，所以在将其更改为列表视图时，它们都需要在单行中(有些元素仍然需要垂直对齐)，这是响应式应用程序。

我需要一些关于样式表类的帮助。

单击一个按钮，我将删除grid-row，grid-item，并添加grid-column和grid-column-item类。我还需要更改这个div (就像最左边的product_search_img类在单行中，然后是下三个div在一列中(在同一行中)，然后是价格，添加到购物车按钮在一列中)。

当前布局：

​

​

所需布局：

​

​

​

代码语言：javascript
复制
.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  height: 400px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 230px;
  position: relative;
  padding: 7px;
  box-sizing: border-box;
}

.grid-column {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.grid-column-item {
  height: 200px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 920px;
  position: relative;
  padding: 7px;
  border-bottom: 1px solid #ccc;
}

.grid-column-item:first-child {
  margin-top: 7px;
  border-top: 1px solid #ccc;
}
代码语言：javascript
复制
<div class="grid-row">
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <a href="#" data-name="sponsored_search_result_link">
        <div class="product_search_img">
          <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%">
        </div>
      </a>
      <div class="font-10 text-align-left status-flag">
        <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
          title="This product has accessories">Accessories</a>
        <a tabindex="1" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag2 HideProductStatusFlag" data-toggle="popover" data-content="body" id="statusflag2" data-original-title="" title=""></a>
      </div>
      <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
        <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
          i5-6300U Dual-core (2 Core)
        </div>
      </a>
      <div class="font-12 text-align-left margin-top-md">
        <div class="show">
          <span class="color-font-dark-gray bold">VPN: </span><span class="color-font-dark-gray">F47UT</span>
        </div>
        <div class="show">
          <span class="color-font-dark-gray bold">SKU: </span><span class="color-font-dark-gray">440Z</span>
        </div>
      </div>
      <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">$1,345.46</div>

      <div class="row" id="login-mode-cntl">
        <div class="color-font-green margin-bottom-sm">In Stock</div>
      </div>
      <div class="row">
        <div class="col-xs-3 col-sm-3 padding-vsm">
          <input class="form-control text-center AddInput-default" title="Please enter the value">
        </div>
        <div class="col-xs-9 col-sm-9 padding-vsm">
          <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
                            <i class="fas fa-shopping-cart"></i>
                            Add
                        </button>
        </div>
      </div>
    </div>
  </div>
</div>

​

css
javascript
jquery
html
EN

回答 1

Stack Overflow用户

发布于 2019-06-29 05:35:41

从你的评论中，我相信你已经能够让外部模块按要求工作了，在下面的例子中，我已经编辑并创建了3个独立的模块，并进行了一些重组。

此外，检查库存目录中的，它将在list_view和grid_view之间切换。

将有一些额外的div，您将需要创建更深入的内部second_block示例来处理VPN和SKU在同一行的列表视图。

​

代码语言：javascript
复制
.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.grid-item {
  /*   height: 400px; */
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 230px;
  position: relative;
  padding: 7px;
  box-sizing: border-box;
  border: 2px solid red;
}

.grid-column {
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}

.grid-column-item {
  height: 200px;
  flex-basis: 25%;
  -ms-flex: auto;
  max-width: 920px;
  position: relative;
  padding: 7px;
  border-bottom: 1px solid #ccc;
}

.grid-column-item:first-child {
  margin-top: 7px;
  border-top: 1px solid #ccc;
}

.outer_block {
  display: flex;
  flex-direction: column;
}

.list_view {
  display: none;
}

@media only screen and (max-width: 800px) {
  .grid-row {
    flex-direction: column;
  }
  .grid-item {
    min-width: 100%;
  }
  .outer_block {
    flex-direction: row;
  }
  .img-thumbnail {
    width: 100px;
  }
  .second_block {
    flex: 1;
  }
  .grid_view {
    display: none;
  }
}
代码语言：javascript
复制
<div class="grid-row">
  <div class="grid-item" data-rank="1">
    <div class="product_info_panel">
      <div class="font-12 text-align-left margin-left-sm margin-top-sm">
        <span class="color-font-blue bold">Sponsored</span>
      </div>
      <div class="outer_block">
        <div class="first_block">
          <!--       Image -->
          <a href="#" data-name="sponsored_search_result_link">
            <div class="product_search_img">
              <img class="img-thumbnail" src="https://cdn.images.express.co.uk/img/dynamic/67/590x/Cristiano-Ronaldo-1069886.jpg?r=1547113668491" title="i5 (6th Gen) i5-6300U Dual-core (2 Core) " width="100%" />
            </div>
          </a>
        </div>

        <div class="second_block">
          <!--       Accessories Text -->
          <div class="font-10 text-align-left status-flag">
            <a tabindex="0" role="button" data-placement="bottom" data-trigger="focus" class="color-font-black bold statusflag statusflag1 ProductAssociationCategoryFlagsList" data-toggle="popover" data-content="This product has accessories" id="statusflag1" data-original-title=""
              title="This product has accessories">Accessories</a
          >
          <a
            tabindex="1"
            role="button"
            data-placement="bottom"
            data-trigger="focus"
            class="color-font-black bold statusflag statusflag2 HideProductStatusFlag"
            data-toggle="popover"
            data-content="body"
            id="statusflag2"
            data-original-title=""
            title=""
          ></a>
          </div>

          <!--       Link to Prod Description -->
          <a href="#" data-name="sponsored_search_result_link" data-identifier="92440Z">
            <div class="p-line-3 font-14 margin-top-lg margin-bottom-sm textUpperCase color-font-blue text-align-left" title="HP Book">
              i5-6300U Dual-core (2 Core)
            </div>
          </a>

          <!--       VPN AND SKU -->
          <div class="font-12 text-align-left margin-top-md">
            <div class="show">
              <span class="color-font-dark-gray bold">VPN: </span
            ><span class="color-font-dark-gray">F47UT</span>
            </div>
            <div class="show">
              <span class="color-font-dark-gray bold">SKU: </span
            ><span class="color-font-dark-gray">440Z</span>
            </div>
          </div>

          <!--       In Stock when in List View-->
          <div id="login-mode-cntl" class="list_view">
            <div class="color-font-green margin-bottom-sm">In Stock</div>
          </div>
        </div>


        <div class="third_block">
          <!--       Adding Button -->
          <div class="row">
            <!--       Price -->
            <div class="font-24 font-light margin-top-sm margin-bottom-sm text-align-left">
              $1,345.46
            </div>
            <!--       In Stock when in Grid View-->
            <div class="row" id="login-mode-cntl" class="grid_view">
              <div class="color-font-green margin-bottom-sm">In Stock</div>
            </div>

            <div class="col-xs-3 col-sm-3 padding-vsm">
              <input class="form-control text-center AddInput-default" title="Please enter the value" />
            </div>

            <div class="col-xs-9 col-sm-9 padding-vsm">
              <button type="button" class="form-control btn AddBtn-default font-12 textUpperCase bold AddBtn" title="Add To Cart">
            <i class="fas fa-shopping-cart"></i>
            Add
          </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56813267

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档