使用浮动水平安排DIV很容易.例如：

<div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

这将产生：

但是如何横向和纵向排列DIV？在这种情况下,如何在有空的空间(黄色和蓝色DIV下)移动红色和紫色DIV？

注意：这只是一个例子,我希望找到一种方法来为任何一组DIV进行排列(不仅仅是这个典型的例子).

假设您正在使用一组动态的任意大小的对象,没有纯CSS方法来实现这一点.如果符合以下条件,您可以使用CSS3多列布局：

>您只需要支持现代浏览器.
>所有对象都可以排列成等高的组.

这里,物体以300px的高度排列.

<div id="blocks">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#blocks {
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  column-count: 3;
  column-gap: 0;
  width: 450px;
}
#blocks div {
  width: 150px;
}

http://jsfiddle.net/RTLun/

有人可以向我解释为什么黄色DIV不会伸展到底部？

我尝试了各种高度,最小高度等排列,但无济于事.

我应该只使用表格吗？

这是我的代码：

<style type="text/css">
    div.page {
      text-align:center;
      border: 1px solid rgb(0,0);
      width:20px;
      height:20px;              
    }

    span.page {
      text-align:center;
      border: 1px solid rgb(0,0);
      width:20px;
      height:20px;              
    }
 </style>


<div>1</div>
<div>2</div>
<div>3</div>

<span>1</span>
<span>2</span>
<span>3</span>

Div看起来很好但是它们垂直放置.有没有办法将它们水平放置在一条线上？

跨度在一行中的位置,但跨度不能具有任何内联元素的宽度.
如果没有办法使用DIV和SPAN来完成我的任务,我将使用一个表,但我正在寻找无表解决方案.

Lorenzo的回答是正确的,但我会在标记中添加一些内容：

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div></div>
</div>

在CSS中,添加：

div.pageHolder-footer{
    clear: left;
    height: 0;
}

这样你的其他东西就会正常流动.

==替代方法(从Jan和SitePoint开始)==

不需要div.pageHolder-footer(但保留pageHolder).然后：

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

它们都有缺点,但这取决于你需要什么.

我预计这会在进入和离开昏暗状态时转换,但它只会在离开时转换.如何在进入时进行过渡？我也尝试过轻松和轻松,但这些似乎没有什么区别.

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
    opacity: .5;
    transition: opacity .5s ease-in-out;
}

问题http://codepen.io/ryanve/pen/doKdgW的实例

因为您需要在.card上定义转换：

.card {
  transition: opacity .5s ease-in-out;
}

而是：

.is-dimmed-unless-active:not(:active):not(:focus):not(:hover) {
  transition: opacity .5s ease-in-out;
}

我遇到了这个问题：

我有一个div(#container),它包含两个div.容器的高度应该是100％,不管这个div的内容是什么 – 不少于更多.

在这个div里面,我想要两个全宽的div在彼此之上：

>(#upper)div的内容自动确定其高度.
>(#lower)div的内容应该是可滚动的,但只能是垂直的.它的高度取决于(#upper)的高度：100％ – (#upper)height =(#lower)height

目前我有以下css …

body {
    margin:0;
    padding:0;
    }
#container 
    {
    position: relative;
    width: 500px;
    height: 100%;
    max-height: 100%;
    background-color: #f00;
    }
#upper { 
    width: 100%;
    background-color: #0f0;
    }
#lower {
    width: 100%;
    background-color: #00f;
    overflow: auto;
}

……以及这段代码：

<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>

(#container)的高度如何正好100％ – 与其内容无关？现在由于(#upper)和(#lower)的组合内容,高度变得更大了？

如何(#lower)可滚动(仅上下,而不是从左到右！)？

非常感谢您的反馈,我希望我们都能从中吸取教训.

你应该将你的html和body元素设置为100％的高度,这样你的孩子div就会知道什么是基于百分比.像这样：

html,body {
    height:100%;
    width:100%;
}

将容器更改为：

#container 
{
    width: 500px;
    height: 100%;
    background-color: #f00;
}

至于你的滚动问题,你几乎就在那里.将代码更改为以下内容：

#lower {
    width: 100%;
    height:100px;
    background-color: #00f;
    overflow-y: auto;
}

为了使它工作得最好,在下部div上设置一个固定的高度,这样可以使滚动动作更容易工作.

编辑：

我意识到我误读了你的问题.您希望让您的下部div填充窗口的剩余高度.以下是如何在jquery中执行此操作：

var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top); 
$('#lower').height(remaining_height);

我还没有找到一种只使用CSS的方法……可悲的是.