2

こんにちは、左側の 2 つの div と右側の 1 つを揃えようとしています。

#div1 #div2
#div1 #div2
#div3 #div2
#div3
#div3

秘訣は、ブラウザー ウィンドウを小さくしたときに、#div2 を #div1 と #div3 の間に配置することです。

現時点では、#div3 は #div2 の後にのみ開始されますが、ウィンドウが縮小されると正しく配置されます

#div1 #div2
#div1 #div2
      #div2
#div3
#div3
#div3
4

2 に答える 2

2

Div に同じ数の要素 (3 つのリンクと、より多くのリンクを表示するための "more" ボタンなど) があり、各 div が同じ高さになるように "Override: ellipsis" 関数によって各行を追加できる場合、あなたの問題を解決します。

それ以外の場合、Div 2 が右手に表示される唯一のものである場合は、左から固定位置に表示されるように設定できます。

私はフィドルでそれをテストしました。成長する能力を奪うと思うので、これを行うことは本当に軽蔑しますが、残念ながら、これを学習例として取り上げていただければ幸いです：http://jsfiddle.net/nugPA/

この行を削除すると、単純な列に戻ります。

div#two {position: fixed; left: 150px;}

このような質問は、過去に何度も出されています。

于 2012-08-08T15:56:14.837 に答える
1

これはあなたが念頭に置いていることですか？(ビューポートのサイズを手動で縮小して、メディア クエリの動作を確認します。)

HTML

<div id="div1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div id="div2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div id="div3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>​

CSS

#div1, #div2, #div3 {
    width: 300px;
}

#div1 {
    border: 1px solid red;
}

#div2 {
    border: 1px solid lime;
    position: absolute;
    top: 0px;
    right: 0px;
}

#div3 {
    border: 1px solid cyan;
}

@media screen and (max-width: 600px) {
#div2 {
    position: static;
}
}

デモ

http://jsfiddle.net/z9AsG/

于 2012-08-08T17:52:59.823 に答える