0
我有一個對話框,將顯示我的網站的訂單,以及每個的內容。每個訂單都有自己的盒子。我遇到問題,格式化的div顯示連續的最大盒子數量。如何用flex顯示每行最大div值?
這個jsfiddle顯示了這個問題。正如你所看到的,這些盒子被擠壓成一排,每個盒子裏的行都會分裂成一條新的線條,這是我不想要的。
我在CSS和對話框代碼中設置了寬度,但我真正想要的是打開到主頁面的全寬或90%的對話框。
有人請指出我的錯誤嗎?
<style>
.test-container {
display: -webkit-flex;
display: flex;
-webkit-reorder-direction: row-reverse;
reorder-direction: row-reverse;
width: 600px;
height: auto;
background-color: lightgrey;
}
.test-item {
background-color: cornflowerblue;
width: 33%;
margin: 10px;
}
</style>
$(document).ready(function() {
$("div").dialog({
modal: true,
title: "My Dialog",
minHeight: 100,
minWidth: 200,
maxWidth: 500,
maxHeight: 250,
});
});
<div class="test-container">
<div class="test-item">Ordered On: 11/19/2014
<div><input name="qty_0" value="1" type="hidden">
<input name="attr_0" type="hidden">
<input name="pid_0" value="788" id="ck_0" type="checkbox"> <label for="ck_0">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 10/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 11/27/2014
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
<div class="test-item">Ordered On: 08/27/2015
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
<div><input name="qty_1" value="1" type="hidden">
<input name="attr_1" type="hidden">
<input name="pid_1" value="788" id="ck_1" type="checkbox"> <label for="ck_1">aaa_Credit Card</label>
</div>
</div>
</div>
謝謝。這有很大的不同。我按照你提到的做了改變,然後意識到在實際使用中線條不會是相同的寬度。我將其更改爲https://jsfiddle.net/thuzm1ny/6/。有沒有辦法對齊這些框或將涉及定義寬度?如果我能夠讓它看起來更有序,它會給人留下更好的印象,我想。 – user3052443
這就是flexbox的工作原理。除非您定義寬度,否則這些項目將根據其內容進行尺寸調整。您可以切換到CSS網格佈局來解決您的問題:https://jsfiddle.net/thuzm1ny/7/ –
這就是我所設想的,但想確定。我會玩你的兩個例子。我感謝你發佈他們。 – user3052443