3

我不知道如何用 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 中有文本区域，并且 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

（没有“clear”，它会愉快地产生

2 1
3 4
6 5

这不是想要的）。

很明显，如果 div 的顺序不同，它可以工作，但我不想这样做（因为如果浏览器有 Javascript，这些 div 是动态生成的，我不想改变实际的顺序出于语义原因，在没有 Javascript 的情况下显示）。是否仍然可以实现我想要的布局？

[对于它的价值，我愿意让它不能在 IE 或旧版本的其他浏览器上运行，所以如果有一个只适用于标准兼容浏览器的解决方案，那没关系 :-)]

4

11 回答 11

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>

于 2008-12-13T16:38:26.573 回答
2

解决方案 1

如果您有能力复制 HTML：

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

解决方案 2

稍等一下，直到浏览器支持CSS3：

.right {
    position: flow(side); 
}

解决方案 3

如果您的 div 具有相同的高度，请使用间接相邻的兄弟组合器。尽管它属于 CSS Level 3，但它已经得到了很好的支持：

.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 */
于 2009-06-10T18:24:31.417 回答
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>
于 2008-12-15T22:52:05.177 回答
2

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

浮动框的外部顶部不得高于源文档中早期元素生成的任何块或浮动框的外部顶部。

因此，您的花车可以向左、向右和向下跳跃，但不能向上跳跃。

您可以通过绝对定位来实现所有目标，但这并不是自动的。

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

于 2008-12-13T16:38:09.833 回答
1

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

你这样说：

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

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

所以（使用 jQuery）：

$("div:eq(3)").remove().insertAfter("div:eq(4)");
于 2008-12-15T20:46:39.860 回答
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 与所有浏览器完美配合。

于 2008-12-13T17:29:12.567 回答
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>
于 2008-12-17T22:54:51.627 回答
0

如果你摆脱清除它工作正常。无论出于何种原因，中间似乎有一些重叠（舍入误差？）。

于 2008-12-13T16:28:00.323 回答
0

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

于 2008-12-13T22:27:31.373 回答
0

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

对表格的强烈反对是针对在整个站点布局中使用它们。但是如果你需要在行和列中显示你的数据......这就是表格的用途:)

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

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

于 2008-12-13T17:38:20.503 回答
0

查看960 网格系统。我过去在项目中使用过它，我不得不说它工作得很好。不仅如此，它易于使用并且跨浏览器保持一致：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>

替代文字 http://img40.imageshack.us/img40/6889/cd3cc920a04b80e06b8efef.png

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

于 2009-06-10T18:31:54.257 回答