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)

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

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

.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>

答案 2 :(得分:2)

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

  

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

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

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

编辑:我在评论中说,我不希望CSS3支持这样的功能,因为它违反了内容和布局的分离。后来,我记得CSS3 plans to have footnotes。因此,如果用“float:note”标记一些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方法不起作用,但是如果你不介意使用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>

答案 8 :(得分:0)

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

答案 9 :(得分:0)

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

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

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

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

答案 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或布局的一部分。