根據數據長度在不同列高度的html中製作表格

我在這裏遇到問題。如何根據數據長度在兩個不同列高度的html中創建表格。我可以使用div來達到這個目的嗎？我希望佈局從上到下移動，而不是從左到右。我以圖片爲例。根據數據長度在不同列高度的html中製作表格

預先感謝您。

2015-10-14 Nosheen

不要使用表都沒有。使用浮動或flexbox。 –

這個https://jsfiddle.net/zp1q2e88/ –

其實我不想顯示額外的/空的空間。我想填寫那裏的數據。 http://osvaldas.info/examples/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback/ – Nosheen

爲了實現您的目標，您可以在一個父div中創建2個div，然後使用固定寬度來獲得動態高度。 M給邊框根據其內容向你展示不同div的高度。

另外不要忘記使用clear:both後使用浮動否則會有空白。

見here，你可以根據你的需要改變的div結構:)

來源

2015-10-14 06:25:02

這應該被接受爲答案:) – Himechi90

@ Himechi90，thanx和是的op在評論中說，它的工作等待.. :) –

請使用以下的HTML代碼相同

<style type="text/css"> 

.main-cont{ 
    float: left; 
    width: 100%; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #999999; 
    font-size: 12px; 
} 
.left-cont{ 
    float: left; 
    width: 49%; 
    padding-right: 1%; 
} 
.right-cont{ 
    float: left; 
    width: 50%; 
} 

</style> 


<div class="main-cont"> 
<div class="left-cont"> 
Burgers<br> 
mode with premium angus beef: substitute grilled chicken breast or block-bean veggie burger 
<br><br> 
Classic Burger $7.95 Our not-so-basic burger topped with lettuce: tomato and shoved red onions 
<br><br> 
Hickory Burger $8.95 Cheddar cheese. hickory-smoked bacon and smoky barbecue sauce 
<br><br> 

</div> 
<div class="right-cont"> 
Hot Dogs premium Vienna beef hot dogs: substitute TofuPup for no charge <br><br> 
Chicago Style $3.75 Topped with yellow mustard: green relish: onions: tomatoes: pickles: sport peppers and celery salt <br><br> 
Sonoran Dog $4.50 Wrapped in bacon and grilled: topped with tomatoes: onions, cotijo cheese, pinto beans, and hot sauce <br><br> 

</div> 

</div>

來源

2015-10-14 06:51:58

根據數據長度在不同列高度的html中製作表格

回答

相關問題