[英]How can I make a table—or something table-like—flow across CSS 3 columns?
[英]How can I code CSS to make Table like?
我想像下面這樣制作“標簽”列表。
我想使用CSS而不是使用Table標記。
我怎樣才能做到這一點?
Tags: Apple Banana Melon Strawberry Kiwi Orange
Pineapple Carrot Onion Tomato Bacon Sandwitch
SoyBeans Pork Beef Chicken
使用display:table-cell
HTML
<div class="table">
<div class="td">tags</div>
<div class="td">Apple Banana Melon Strawberry Kiwi Orange Pineapple Carrot Onion Tomato Bacon Sandwitch SoyBeans Pork Beef Chicken </div>
</div>
CSS
.table{display:table-row; width:350px; }
.td:first-child{width:10px; }
.td{display:table-cell; padding:10px; width:320px}
您可以這樣做:
HTML:
<div class="left">
Tags:
</div>
<div class="right">
Apple Banana Melon Strawberry Kiwi Orange
Pineapple Carrot Onion Tomato Bacon
Sandwitch SoyBeans Pork Beef Chicken
</div>
CSS:
.left, .right
{
color:#2B91AF;
}
.left
{
float: left;
width: 30px; //adjust this width according to your needs
margin-right: 10px; //adjust this margin according to your needs
}
.right
{
float: left;
width: 400px; //adjust this width according to your needs
}
這只是一個小提琴,因為它很不錯: http : //jsfiddle.net/VQjGW/
對於這樣的事情,我建議使用定義列表。 您可以在此處閱讀出色的文章: http : //css-tricks.com/utilizing-the-underused-but-semantically-awesome-definition-list/
之后,使用css和像示例中那樣放置元素應該足夠容易。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.