-1

到目前为止，我将三列放在一个垂直框中（还不能发布图片，所以这里有一个链接）：http: //imgur.com/4Y34c

<div id="vbox">
<div id="blck1"></div>
<div id="blck2"></div>
<div id="blck3"><div id="yellow"></div><div id="blue"></div></div>
</div>

css

 #vbox{
 display: box;
 box-orient: vertical;
 }
 #vbox > div {
 box-flex: 1;
 }

问题是我不知道如何让蓝色框与第三列的底部对齐。我尝试了所有对齐属性，我一定做错了。有任何想法吗？？？

4

1 回答 1

1

首先，您应该使用新的 CSS Flexible Box Module 语法（现在称为“Flex”而不是“Box”）。请参阅此处的规范：http: //www.w3.org/TR/css3-flexbox/

这是您尝试完成的示例（在 Chrome/Safari 中）：http: //jsfiddle.net/PU2AV/

在你的第三个<div>我已经设置：

-webkit-justify-content: space-between;

这会在两个元素之间创建空间（如果添加更多元素，它将平均划分所有元素之间的空间）。

或者，您可以<div>在 #yellow 和 #blue 之间添加三分之一并给出：

-webkit-flex: 1 1 auto;

这将导致它在#yellow 和#blue（具有静态高度）之间“弯曲”，将#blue 一直向下推。如果您将其保留为透明背景，它将具有相同的效果。有时您可能会发现将灵活空间作为实际元素很有用。

于 2012-11-20T05:15:35.947 回答