搜索
搜索

使弹性项目包装以形成2列网格

fefe 发表于 Dev
16
菲菲

我正在尝试使用flexbox创建一个2列网格，但未产生期望的结果。相反，它每行产生3列。这是我的标记和CSS：

#product_variants {
  display: flex;
}
#product_variants .product_addtocart_variant {
  padding: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container {
  display: inline-flex;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .variant-price {
  font-weight: bold;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .quantity input {
  width: 52px;
  height: 52px;
  text-align: center;
  border: 3px solid #002855 !important;
}
#product_variants .product_addtocart_variant .box-tocart .actions button {
  background-color: transparent;
  border: 3px solid #ef7c00;
  color: #ef7c00;
  height: 52px;
}
<div id="product_variants">
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-100 Exemplare</strong>
        <span>Artikelnummer: 322123-100 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 432.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-50 Exemplare</strong>
        <span>Artikelnummer: 322123-50 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 232.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-10 Exemplare</strong>
        <span>Artikelnummer: 322123-10 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 132.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

这里我有更少的例子

迈克尔·本杰明（Michael Benjamin）

flex容器的初始设置为flex-wrap: nowrap。这意味着弹性项目将堆叠在一行中，而不是自动换行。

而是使用以下命令：

#product_variants {
  display: flex;
  flex-wrap: wrap; /* NEW */
}

另外，要强制每行两列，请给每一项flex-basis: 50%和box-sizing: border-box。

* {
  box-sizing: border-box;  /* NEW */
}
#product_variants {
  display: flex;
  flex-wrap: wrap;         /* NEW */
}
#product_variants .product_addtocart_variant {
  padding: 10px;
  flex-basis: 50%;         /* NEW */
}
#product_variants .product_addtocart_variant .box-tocart .variant-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container {
  display: inline-flex;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .variant-price {
  font-weight: bold;
}
#product_variants .product_addtocart_variant .box-tocart .variant-container .quantity input {
  width: 52px;
  height: 52px;
  text-align: center;
  border: 3px solid #002855 !important;
}
#product_variants .product_addtocart_variant .box-tocart .actions button {
  background-color: transparent;
  border: 3px solid #ef7c00;
  color: #ef7c00;
  height: 52px;
}
<div id="product_variants">
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-100 Exemplare</strong>
        <span>Artikelnummer: 322123-100 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 432.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-50 Exemplare</strong>
        <span>Artikelnummer: 322123-50 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 232.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
  <form class="product_addtocart_variant" novalidate="novalidate">
    <div class="box-tocart">
      <div class="variant-info">
        <strong>322123-10 Exemplare</strong>
        <span>Artikelnummer: 322123-10 Exemplare</span>
      </div>
      <div class="fieldset">
        <div class="variant-container">
          <div class="variant-price">
            <span>Brutto: 132.0000</span>
            <span>Netto: </span>
          </div>
          <div class="quantity">
            <div class="control">
              <input type="number" name="qty" class="qty" maxlength="12" value="1" title="Anzahl" data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:1}}">
            </div>
          </div>
          <div class="actions">
            <button type="submit" title="Zum Warenkorb hinzufügen" class="action primary tocart">
              <span>Zum Warenkorb hinzufügen</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在整个行/列中对齐网格项目（就像弹性项目一样）

为什么弹性项目包装而不是收缩？

弹性列中等高的弹性项目

带包装的行弹性框内的嵌套列弹性框

网格列未按预期包装

仅当弹性项目达到最小宽度时才包装它们

如何在包装的弹性项目之间实现分隔符？

从包装中排除第一个弹性项目

使弹性项目一次包装两个

包装时，在多行弹性项目之间消除空格（间隙）

等宽的弹性项目即使包装后也是如此

显示弹性-向左推网格项目，同时保持

使网格扩展到弹性项目内的剩余高度

在弹性方向上连续显示弹性项目：列

我可以从上到下对网格项目进行排序，同时仍然包装到下一列吗？

如何让一个弹性项目填充另一个相邻弹性项目下的空白空间（包装）

建立3列2行的弹性网格布局，其中第一项跨越两行

Windows 8.1如何自动包装网格项目？

使弹性项目包装到下一行，随后的项目继续该流程

CSS Flexbox：3个弹性项目，2列（宽度等于内容）和1个宽度增加的项目

封装的弹性容器包装

将弹性框列中的项目按中间项目对齐

弹性网格对齐

CSS 网格 2 列

将弹性项目水平居中放置在2个不同宽度的弹性项目之间

将弹性项目包装后不使用媒体查询就使其全宽

可以使用哪个CSS选择器来选择处于包装状态的弹性框项目？

仅使用flexbox CSS将弹性项目像网格一样对齐

CSS 网格和弹性框不起作用 - 无法移动项目？

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档