我无法弄清楚如何使用CSS实现以下布局(可能是因为我实际上并不知道CSS).
我有一堆像这样的div：
<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列,右边是“右”,左边是“左”,因此：
2 1 3 5 4 6
[编辑：在这个问题的先前版本中,我在div中有textareas,并且div都有不同的名称,如“one”和“xyz”.]
我尝试过类似的东西
div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}
但它不太有效：它产生的东西如下：
2 1 3 4 5 6
(没有“清楚”的,它轻快地产生
2 1 3 4 6 5
这不是想要的东西).
很明显,如果div的排序方式不同,可以使它工作,但我不想这样做(因为如果浏览器有Javascript,这些div是动态生成的,我不想改变实际的顺序由于语义原因,在没有Javascript的情况下显示.是否仍然可以实现我想要的布局？
[对于它的价值,我愿意让它不适用于IE或其他浏览器的旧版本,所以如果有一个解决方案仅适用于符合标准的浏览器,那没关系:-)]
解决方法@H_404_33@
以下适用于Firefox 3：
div {
width: 198px;
border: 1px solid black;
}
div.onediv,div.tendiv,div.xyzdiv { float: right; }
div.twodiv,div.abcdiv,div.pqrdiv { float: left; }
<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>
只是一个简单的说明：将div放在你的类名(即abcdiv)中有点多余和奇怪.如果没有对正确的课堂使用情况进行大量的抨击,我会把它留下来.
如果你只是说“col1”和“col2”,你实际上可以简化你的代码.这样你甚至可以在以后交换列,如果你想：
div {
width: 198px;
border: 1px solid black;
}
div.col1 { float: right; }
div.col2 { float: left; }
<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>
div {
width: 198px;
border: 1px solid black;
}
div.onediv,div.tendiv,div.xyzdiv { float: right; }
div.twodiv,div.abcdiv,div.pqrdiv { float: left; }
<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>
只是一个简单的说明：将div放在你的类名(即abcdiv)中有点多余和奇怪.如果没有对正确的课堂使用情况进行大量的抨击,我会把它留下来.
如果你只是说“col1”和“col2”,你实际上可以简化你的代码.这样你甚至可以在以后交换列,如果你想：
div {
width: 198px;
border: 1px solid black;
}
div.col1 { float: right; }
div.col2 { float: left; }
<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>
