1

flexbox を使用して正当化コンテンツを実装する際に問題があります。自分の言語とソーシャル メディア バーをフレックス コンテナー内に浮かせたいと思っています。私はクロムを使用しているので、コード スニペットに -webkit プレフィックスがあります。私は何を間違っていますか？W3C 仕様と Chrome 開発ツールによると、私のアプローチは正しいはずですが、間違っている可能性があります。

返信ありがとうございます。

コード スニペット: HTML:

<div id="upBar">
        <div id="languagePanel">
            <ul>
                <li><a href="#">Eng</a></li>
                <li><a href="#">Ger</a></li>
                <li><a href="#">Fr</a></li>
            </ul>
        </div>
        <div id="media">
            <ul>
                <li><a href="#">FB</a></li>
                <li><a href="#">mail</a></li>
            </ul>
        </div>
    </div>

CSS:

#upBar{
    display: -webkit-flex;
    -webkit-flex-direction: column;
}

#languagePanel, #media{
-webkit-justify-content: flex-end;
display: block;
}
4

1 に答える 1

2

「display:block」を「display:-webkit-flex」に変更すると、2 つのパネルがコンテナー内の右側に移動します。

#languagePanel, #media {
    -webkit-justify-content: flex-end;
    display: -webkit-flex;
}

デモ: http://jsfiddle.net/JWNmZ/

于 2013-08-07T18:03:26.227 に答える