CSS：两列 [英] CSS: two columns
问题描述
我无法弄清楚如何使用CSS实现以下布局（可能因为我实际上不知道CSS）。
I can't figure out how to achieve the following layout with CSS (probably because I don't actually know CSS).
我有一堆div像这样：
I have a bunch of divs like this:
<div class="right"> <p>1</p> </div>
<div class="left"> <p>2</p> </div>
<div class="left"> <p>3</p> </div>
<div class="left"> <p>4</p> </div>
<div class="right"> <p>5</p> </div>
<div class="right"> <p>6</p> </div>
（不是真实内容）
现在我想让布局看起来像两个相等的div列，右边的右，左边的左边，因此：
Now I want the layout to look like two equal columns of divs, with the "right" ones on the right, and the "left" ones on the left, thus:
2 1
3 5
4 6
[编辑：在此问题的以前版本中，我在divs中有textareas，div都有不同的名称，例如one和xyz。]
div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}
但它不工作：它产生类似：
but it doesn't quite work: It produces something like:
2 1
3
4 5
6
（没有清除，它会产生
2 1
3 4
6 5
很明显，如果div的顺序不同，但是我不想这样做，它可以工作。（因为这些div是如果浏览器具有Javascript，则动态生成，并且由于语义原因，我不想改变在没有Javascript的情况下显示的实际顺序）。是否仍然可以实现我想要的布局？
It is apparent that it can be made to work if the divs are ordered differently, but I'd like not to do that (because these divs are generated dynamically if the browser has Javascript, and I don't want to change the actual order that is displayed in the absence of Javascript, for semantic reasons). Is it still possible to achieve the layout I want?
[为什么值得，我愿意让它不工作在IE或旧版本的其他浏览器，所以如果有一个解决方案只工作在符合标准的浏览器，那没关系： - ）]
[For what it's worth, I'm willing to have it not work on IE or older versions of other browsers, so if there is a solution that works only on standards-compliant browsers, that's okay :-)]
推荐答案
我在Firefox 3中：
The following works for me in Firefox 3:
<html>
<head>
<style>
div {width: 198px; border: 1px solid black; }
div.onediv, div.tendiv, div.xyzdiv { float: right;}
div.twodiv, div.abcdiv, div.pqrdiv { float: left;}
</style>
</head>
<body>
<div style="width: 400px;">
<div class="onediv"> <p>One name</p> <textarea id="one"></textarea></div>
<div class="twodiv"> <p>Two name</p> <textarea id="two"></textarea></div>
<div class="tendiv"> <p>Ten name</p> <textarea id="ten"></textarea></div>
<div class="abcdiv"> <p>Abc name</p> <textarea id="abc"></textarea></div>
<div class="xyzdiv"> <p>Xyz name</p> <textarea id="xyz"></textarea></div>
<div class="pqrdiv"> <p>Pqr name</p> <textarea id="pqr"></textarea></div>
</div>
</body>
</html>
只要快速注意：在类名称（即abcdiv）中加入div和奇怪。
Just a quick note: putting "div" inside your class name (i.e. abcdiv) is a little redundant and weird. Without going into a huge diatribe about proper class usage, I would leave it out.
如果你只是说col1和col2，你实际上可以简化你的代码。这样，你甚至可以在以后交换列：
You can actually simplify your code if you just say "col1" and "col2". That way you can even swap the columns later if you want:
<html>
<head>
<style>
div {width: 198px; border: 1px solid black; }
div.col1 { float: right;}
div.col2 { float: left;}
</style>
</head>
<body>
<div style="width: 400px;">
<div class="col1"> <p>One name</p> <textarea id="one"></textarea></div>
<div class="col2"> <p>Two name</p> <textarea id="two"></textarea></div>
<div class="col1"> <p>Ten name</p> <textarea id="ten"></textarea></div>
<div class="col2"> <p>Abc name</p> <textarea id="abc"></textarea></div>
<div class="col1"> <p>Xyz name</p> <textarea id="xyz"></textarea></div>
<div class="col2"> <p>Pqr name</p> <textarea id="pqr"></textarea></div>
</div>
</body>
</html>
这篇关于CSS：两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
