CSS：两列

时间：2008-12-13 16:12:49

标签： css layout

我无法弄清楚如何使用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或其他浏览器的旧版本上运行，所以如果有一个解决方案仅适用于符合标准的浏览器，那没关系： - ）]

11 个答案:

答案 0 :(得分：3)

以下适用于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>

答案 1 :(得分：2)

您尝试将输入流分成两个独立的流，我认为CSS不允许您这样做。使用左右浮动是一个聪明的想法，但它并不总是有效。 CSS spec在9.5.1规则5中说：

  

浮箱的外顶部可以   不高于外面的顶部   由...生成的任何块或浮动框   源中较早的元素   文档。

所以，你的花车可以向左，向右和向下跳，但不能向上跳。

你可以通过绝对定位来实现所有目标，但没有任何关于它的自动。

编辑：我在评论中说，我不希望CSS3支持这样的功能，因为它违反了内容和布局的分离。后来，我记得CSS3 plans to have footnotes。因此，如果用“float：note”标记一些div，则所选的div将流入页面的单独“脚注”区域。我想你可以将它们放在布局其余部分的右侧。

答案 2 :(得分：2)

我将留下这个答案的其余部分，以便其他人可以看到我最初的想法，但这种方法实际上失败了，并且要求总是有更多浮动元素而不是浮动元素。

我认为这是你的解决方案（未经测试）。

.left { width: 51%; float: left; }
.right { width: 49%; }

51％阻止他们彼此浮动，然后让所有.right内容围绕那些浮动的块包围。

不经常思考会给你带来更多的HTML / css，再次 - 没有使用表格进行布局。

=== [编辑] ===

我对此进行了测试，它确实可以进行一些调整，如果你知道第一个项目是向左浮动（或者是向右反转行为）。

<style>
  div div { text-align: center; padding: 20px 0; overflow: hidden; }
  .left { width: 251px; float: left; background: red; }
  .right { width: 249px; background: green; }
</style>
<div style="width: 500px;" >
  <div class="left"> <p>1</p> </div>
  <div class="right">  <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>

答案 3 :(得分：2)

解决方案1 ​​

如果你有能力复制HTML：

.left-column .right, .right-column .left {
    display: none;
}

解决方案2

稍等片刻，直到浏览器支持CSS3：

.right {
    position: flow(side); 
}

解决方案3

如果您的div具有相同的高度，请使用indirect adjacent sibling combinator。即使它属于CSS Level 3，它已经是well-supported：

.container {
    position: relative;
}

.left, .right {
    position: absolute;
    top : 0;
    width: 50%;
} 

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left ~ .left, .right ~ .right {
    top : 100px;
}

.left ~ .left ~ .left, .right ~ .right ~ .right {
    top : 200px;
}

.left ~ .left ~ .left ~ .left, .right ~ .right ~ .right ~ .right {
    top : 300px;
}

... /* you need to include as many rules as the maximum possible height */

答案 4 :(得分：1)

当我遇到这种问题时，我通常会使用桌子。

<table>
    <tr>
        <td>
            <p>One name</p> <textarea id="one"></textarea>
        </td>
       <td>
            <p>XYZ name</p> <textarea id="xyz"></textarea>
        </td>
    </tr>
   ....
 </table>

Alignement与所有浏览器完美配合。

答案 5 :(得分：1)

你有Javascript - 为什么不使用它？

你这样说：

如果浏览器有Javascript，这些div是动态生成的，出于语义原因，我不想更改在没有Javascript的情况下显示的实际顺序......

如果用户使用Javascript，您只显示这些<div> - 为什么不使用Javascript重新排列它们？如果您将＃4移到＃5之后，它看起来很好用你当前的CSS。

所以（使用jQuery）：

$("div:eq(3)").remove().insertAfter("div:eq(4)");

答案 6 :(得分：0)

如果你摆脱了清除它可以正常工作。无论出于何种原因，看起来中间都有一些重叠（舍入错误？）。

答案 7 :(得分：0)

表格是这个恕我直言的完全可以接受的解决方案。

针对表格的强烈反对意味着将它们用于整个网站布局。但是如果你需要在行和列中显示数据......那就是为表格制作的表格：）

如果您仍然对可行的跨浏览器CSS解决方案感兴趣，我会考虑使用框架。它可以节省您花费数小时的时间来让您的页面看起来正确。

http://www.blueprintcss.org/是一个很好的框架恕我直言。

答案 8 :(得分：0)

也许你可以选择绝对定位？它当然取决于页面结构的其余部分，但通常这是非常可行的。

答案 9 :(得分：0)

我感到内疚，纯粹的css方法不起作用，但是如果你不介意使用JavaScript来获得你所追求的东西，那么这里有一些jQuery可行（其他人可能会清理）如果你不喜欢臃肿，这就是你。

<style>
  #container { width: 500px; border: 1px grey solid; overflow: hidden; }
  #container .rightSide { width: 250px; float: right; }
  #container .left { width: 250px; background: red; padding: 20px 0; overflow: hidden; text-align: center; }
  #container .right { width: 250px; background: green; padding: 20px 0; overflow: hidden; text-align: center; }
</style>
<script type="text/javascript">
$(document).ready(function() {
  $('#container').prepend('<div class="rightSide"></div>');
  $('#container div.right').each(function() {
    var $rightContent = $(this).remove().html();
    $('.rightSide').append('<div class="right">' + $rightContent + '</div>');
  });
});
</script>
<div id="container" >
  <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>

答案 10 :(得分：0)

查看960 Grid System。我过去在项目上使用过这个，我不得不说它的效果非常好。不仅如此，它易于使用且在浏览器中保持一致：D

使用此框架：

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
        <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
     </head>
     <body>
     <div class="container_16">
         <div class="grid_1 alpha" style="text-align:center;">
            2
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            1
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            4
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            3
         </div>
         <div class="clear"></div>
         <div class="grid_1 alpha" style="text-align:center;">
            5
         </div>
         <div class="grid_1 omega" style="text-align:center;">
            4
         </div>
    </div>
</body>
</html>

alt text http://img40.imageshack.us/img40/6889/cd3cc920a04b80e06b8efef.png

文本顶部的栏位于我的浏览器中，而不是CSS或布局的一部分。

相关问题
最新问题