如何使用CSS在一個div中使用多個跨度創建表

我想創建2列使用span與div內的多行。我能夠得到2列，但不是多行。

無法更改HTML代碼。

span{ 
 
    display: inline-block; 
 
} 
 
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after { 
 
    content: '\A'; 
 
    white-space: pre; 
 
} 
 
.totalAmount, .oldTotal, .totalDue{ 
 
    float: left; 
 
} 
 
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{ 
 
    float: right; 
 
}

<div class="payment-breakdown"> 
 
    <span class="totalAmount">Total:</span> 
 
    <span class="totalAmount-dd">100USD</span> 
 
    <span class="oldTotal">Previously paid:</span> 
 
    <span class="oldTotal-dd">50USD</span> 
 
    <span class="totalDue">Amount Due:</span> 
 
    <span class="totalDue-dd">50USD</span> 
 
</div>

有人能指導我什麼，我做錯了嗎？

來源

2016-03-05 Laurent

你爲什麼不使用表？ –

同意...這顯然是一個真正的桌子的地方。 –

你可以刪除自己的全部css和使用這種簡單的CSS代碼片段解決這個問題：

.payment-breakdown span{ 
    display: block; 
    width: 50%; 
    float: left; 
}

JSFIDDLE DEMO

您可以風格每一列使用僞選擇器nth-child(odd)和nth-child(even)。

JSFIDDLE DEMO WITH STYLED COLUMNS

來源

2016-03-05 13:17:13

它很好。我瞭解顯示和浮動。但如何做寬度50％，右欄創建？ – Laurent

嘿@勞倫特，這是一個「大」的問題。我推薦閱讀這篇文章：https：// css-tricks。com/all-about-floats/- 因爲所有元素都想浮到左邊，並且他們可以使用父母div的100％，只使用一半大小（50％）讓兩個span元素使用同一行。 –

有趣的是，你不能更改HTML，因爲它似乎有點奇特從跨度建立表！

我想你會想要清理你的花車，因爲與花車有關的高度問題。使用類似clearfix或this.

試試看，然後讓我知道如果這沒有幫助。

來源

2016-03-05 13:12:26 ZCaceres

您可以通過在所有元素上使用float: left;並使它們的寬度達到50％來實現此目的。然後使用clearfix來避免你的頁面被搞亂。

span{ 
 
    display: inline-block; 
 
} 
 
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after { 
 
    content: '\A'; 
 
    white-space: pre; 
 
} 
 
.totalAmount, .oldTotal, .totalDue, .totalAmount-dd, .oldTotal-dd, .totalDue-dd { 
 
    float: left; 
 
    width: 50%; 
 
}

<div class="payment-breakdown"> 
 
    <span class="totalAmount">Total:</span> 
 
    <span class="totalAmount-dd">100USD</span> 
 
    <span class="oldTotal">Previously paid:</span> 
 
    <span class="oldTotal-dd">50USD</span> 
 
    <span class="totalDue">Amount Due:</span> 
 
    <span class="totalDue-dd">50USD</span> 
 
</div>

來源

2016-03-05 13:13:16 Roy

Flexbox，就可以做到這一點。

.payment-breakdown { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 50%; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
} 
 
span { 
 
    flex: 0 0 50%; 
 
} 
 
.totalAmount, 
 
.oldTotal, 
 
.totalDue { 
 
    text-align: left; 
 
} 
 
.totalAmount::after, 
 
.oldTotal::after, 
 
.totalDue::after { 
 
    text-align: left; 
 
    display: flex; 
 
} 
 
.totalAmount-dd, 
 
.oldTotal-dd, 
 
.totalDue-dd { 
 
    text-align: right; 
 
}

<div class="payment-breakdown"> 
 
    <span class="totalAmount">Total:</span> 
 
    <span class="totalAmount-dd">100USD</span> 
 
    <span class="oldTotal">Previously paid:</span> 
 
    <span class="oldTotal-dd">50USD</span> 
 
    <span class="totalDue">Amount Due:</span> 
 
    <span class="totalDue-dd">50USD</span> 
 
</div>

來源

2016-03-05 13:18:08

謝謝，我會發現更多關於彈性盒。 – Laurent

試試這個代碼尖晶石

.payment-breakdown { 
    overflow: auto; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.payment-breakdown span { 
     display: inline-block; 
     float: left; 
     display: table-cell; 
     width: 25%; 
    }

來源

2016-03-05 13:23:50 Aman

您可以添加一些JavaScript的每個元素後添加br標籤。

'use strict'; 
 
var spans = document.getElementsByTagName("span"); 
 
for(var i = 0; i < spans.length; i++) { 
 
\t spans[i].outerHTML += "<br/>"; 
 
}

span{ 
 
    display: inline-block; 
 
} 
 
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after { 
 
    content: '\A'; 
 
    white-space: pre; 
 
} 
 
.totalAmount, .oldTotal, .totalDue{ 
 
    float: left; 
 
} 
 
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{ 
 
    float: right; 
 
}

<div class="payment-breakdown"> 
 
    <span class="totalAmount">Total:</span> 
 
    <span class="totalAmount-dd">100USD</span> 
 
    <span class="oldTotal">Previously paid:</span> 
 
    <span class="oldTotal-dd">50USD</span> 
 
    <span class="totalDue">Amount Due:</span> 
 
    <span class="totalDue-dd">50USD</span> 
 
</div>

來源

2016-03-05 14:30:06 Aplet123

謝謝，我不想用js – Laurent

如何使用CSS在一個div中使用多個跨度創建表

回答

相關問題