代码之家 › 专栏 › 技术社区 › ShreevatsaR

CSS:两列

layout css

ShreevatsaR · 技术社区 · 17 年前

我不知道如何用CSS实现下面的布局(可能是因为我不知道CSS)。

我有很多这样的女主角:

<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,右边是“右”的div,左边是“左”的div,因此:

2 1
3 5
4 6

[ 编辑:在这个问题的前一个版本中,我在div中有文本区域,这些div都有不同的名称,比如“one”和“xyz”。 ] 我试过类似的方法

div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}

但它不太管用:它会产生如下结果:

(如果没有“清晰的”s,它会愉快地产生

2 1
3 4
6 5

这不是我们想要的)。

很明显,如果div的顺序不同,它可以正常工作,但我不想这样做(因为如果浏览器有Javascript,这些div是动态生成的,出于语义原因,我不想更改在没有Javascript的情况下显示的实际顺序)。还有可能实现我想要的布局吗?

[无论如何,我愿意让它不适用于IE或其他浏览器的旧版本,所以如果有一个解决方案只适用于符合标准的浏览器,那没关系:-)]

11 回复 | 直到 17 年前

YakovL Naresh Kumar Nakka 8 年前

以下内容在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>

buti-oxa 17 年前

你试图将你的输入流分成两个独立的流,我认为CSS不允许你这么做。使用左浮动和右浮动是一个聪明的想法,但并不总是有效。 CSS spec 9.5.1第5条规定:

浮箱的外部顶部可能会不应高于顶部由生成的任何块或浮动框源代码中较早的元素文件

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

你可以通过绝对定位来实现一切,但这并不是自动的。

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

Steve Perks 17 年前

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

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

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

这51%阻止了它们彼此漂浮在一起,然后让所有的。正确的内容围绕着这些浮动块。

少思考会让你在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>

ilya n. 17 年前

解决方案1

如果您有能力复制HTML:

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

解决方案2

请稍等,直到浏览器支持 CSS3 :

.right {
    position: flow(side); 
}

解决方案3

如果你的div高度相同,请使用 indirect adjacent sibling combinator .虽然它属于CSS级别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 */

LeJeune 17 年前

当我遇到这种问题时,我通常会选择桌子。

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

Alignment可以完美地与所有浏览器配合使用。

Community Mohan Dere 6 年前

你有Javascript——为什么不使用它呢?

你说过:

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

你只是在展示这些 <div> 如果用户有Javascript- 为什么不使用Javascript重新排列它们呢? 如果你把#4移到#5之后,你现在的CSS看起来不错。

所以(使用jQuery):

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

user42092 user42092 17 年前

如果你清除了垃圾,效果很好。看起来中间有一些重叠,不管是什么原因(舍入误差)。

Andy Webb 17 年前

对于这个IMHO,表格是一个完全可以接受的解决方案。

对表格的强烈反对是为了在整个网站布局中使用它们。但是,如果需要以行和列的形式显示数据。。。。。。这就是桌子的用途:)

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

http://www.blueprintcss.org/ 是一个优秀的IMHO框架。

Vilx- 17 年前

也许你可以选择绝对定位?当然,这取决于页面的其他结构,但这通常是可行的。

Anders 17 年前

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

Tim Cooper 14 年前

我对纯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>