-1

これまでのところ、縦のボックスに 3 つの列が配置されています (まだ画像を投稿できないため、ここにリンクがあります): 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;
 }

問題は、青いボックスを 3 番目の列の下部に揃える方法がわからないことです。すべての配置プロパティを試しましたが、何か間違っているに違いありません。何か案は？？？

4

1 に答える 1

1

何よりもまず、新しい CSS Flexible Box Module 構文 (現在は「Box」ではなく「Flex」と呼ばれています) を使用する必要があります。ここで仕様を参照してください: http://www.w3.org/TR/css3-flexbox/

（Chrome/Safariで）達成しようとしているものの例を次に示します：http://jsfiddle.net/PU2AV/

あなたの3番目<div>に私が設定した：

-webkit-justify-content: space-between;

これにより、2 つの要素の間にスペースが作成されます (さらに追加すると、それらすべての間のスペースが均等に分割されます)。

<div>または、 #yellow と #blue の間に 3 分の 1 を追加して、次のように指定することもできます。

-webkit-flex: 1 1 auto;

これにより、#yellow と #blue (静的な高さを持つ) の間で「屈曲」し、#blue を完全に押し下げます。背景を透明のままにしておくと、同じ効果が得られます。柔軟なスペースを実際の要素として持つと便利な場合があります。

于 2012-11-20T05:15:35.947 に答える