问题描述
假设我有一系列的东西
< P> * 20050108< / p>
< p> * 20050120< / p>
< p> * 20050116< / p>
< p> * 20050119< / p>
.. ..
....
超过一百件商品。
有没有办法使用css让它流动分为2列？
而不是在表格中手动硬编码：
< table>< tr>< td>
....
< / td>
< td>
....
< / td>
< / tr>< / table>
谢谢。
Xah
suppose i have a list of things
<P>* 20050108 </p>
<p>* 20050120 </p>
<p>* 20050116 </p>
<p>* 20050119 </p>
....
....
over a hundred items.
is there a way to use css so that it flows into 2 columns?
as opposed to manually hardcode in table:
<table><tr><td>
....
</td>
<td>
....
</td>
</tr></table>
Thanks.
Xah
xa*@xahlee.org
http://xahlee.org/PageTwo_dir/more.html
推荐答案
' 'float''：< http://webdesign.crissov.de/temp/multicol-lists>
我认为这个解决方案存在一些缺陷，但我不记得了/>
哪个。
-
丑陋的事实，真实的朋友告诉你。
King Pellinore（卡米洛特）
''float'': <http://webdesign.crissov.de/temp/multicol-lists>
I think there were some flaws with that solution, but I don''t remember
which.
--
"The uglier the truth, the truer the friend that told you."
King Pellinore (Camelot)
怎么样这个？改编自：
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN"
" http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html>
< head>
< title> Untitled< / title>
< META HTTP-EQUIV =" Content-Type" CONTENT =" text / html的; charset = ISO-8859-1">
< style type =" text / css">
body {
width ：100％;
}
..colwrapper {
border：1px solid red;
padding：0px ;
/ *保证金：50px; * /
宽度：50％;
}
li {
float：left;
宽度：180px;
保证金：0;
填充：0;
border：0;
}
< / style>
< / head>
< body>
< ; div class =''colwrapper''>
< ul class =" twocol">
< li> Papaya< / li>
< li>芒果< / li>
< li>香蕉香蕉香蕉香蕉香蕉< / li>
< li> Pineapple< / li>
< li> Cantaloupe< / li>
< li>西瓜< / li>
< li> Apricot< / li>
< li> Pear< / li>
< li> Pineapple< / li>
< li> Cantaloupe< ; / li>
< li>西瓜< / li>
< li> Apricot< / li>
< li> Pear< / li>
< li> Pineapple< / li>
< li> Cantaloupe< / li>
< li>西瓜< / li>
< li> Apricot< / li>
< li> Pear< / li>
< li> Pear< / li>
< li> Pineapple< / li>
< li> Cantaloupe< / li>
< li>西瓜< / li>
< li> Apricot< / li>
< li> Pear< / li> ;
< / ul>
< / div>
< / body>
< / html>
How about something like this? Adapted from:
http://www.fu2k.org/alex/css/cssjunk/ListColumns.mhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body{
width: 100%;
}
..colwrapper{
border: 1px solid red;
padding: 0px;
/* margin: 50px; */
width: 50%;
}
li {
float: left;
width: 180px;
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body>
<div class=''colwrapper''>
<ul class="twocol">
<li>Papaya</li>
<li>Mango</li>
<li>Banana banana banana banana banana</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
<li>Pear</li>
<li>Pineapple</li>
<li>Cantaloupe</li>
<li>Watermelon</li>
<li>Apricot</li>
<li>Pear</li>
</ul>
</div>
</body>
</html>
这篇关于将文本分成两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！