Оберните изгибаемые элементы в сетку из 2 столбцов
Я пытаюсь сделать 2-колоночную сетку с flexbox, но она не дает желаемого результата. Вместо этого он производит 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>
здесь у меня есть мойпример менее