我试图使用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="{"required-number":true,"validate-item-quantity":{"minAllowed":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="{"required-number":true,"validate-item-quantity":{"minAllowed":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="{"required-number":true,"validate-item-quantity":{"minAllowed":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>
&#13;
这里我的example少了
答案 0 :(得分:1)
Flex容器的初始设置为flex-wrap: nowrap
。这意味着flex项目将堆叠在一行而不是换行。
相反,请使用:
#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;
}
&#13;
<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="{"required-number":true,"validate-item-quantity":{"minAllowed":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="{"required-number":true,"validate-item-quantity":{"minAllowed":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="{"required-number":true,"validate-item-quantity":{"minAllowed":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>
&#13;