0

レイアウトの最も外側の div の上にメニューを固定することがまったく可能かどうか疑問に思っていますか?
私がセットアップした jsFiddle は次のとおりです: http://jsfiddle.net/L2Deq/7/
そして、コードも次のとおりです:
HTML—</p> 

<div id="menu">Menu 1</div>
<div id="testing">Testing 1</div>

<div id="menu-right">Menu 2</div>

<div id="boxed">
<div id="box-01" class="boxes"></div>
<div id="box-02" class="boxes"></div>
<div id="box-03" class="boxes"></div>
<div id="box-04" class="boxes"></div>
<div id="box-05" class="boxes"></div>
<div id="box-06" class="boxes"></div>
<div id="box-07" class="boxes"></div>
<div id="box-08" class="boxes"></div>
</div>

CSS—</p> 

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    left: 20px;
    top: 10px;
    position: absolute;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 100px;
    left: 128px;
    top: 10px;
    position: absolute;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    left: 20px;
    top: 30px;
    position: absolute;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}



基本的に、一番外側の赤いボックスに沿って「メニュー 2」を固定しようとしています。そのため、画面サイズが縮小されると、メニューは 100px (赤いボックスの幅) で移動するため、常に右側のボックスと一直線になります。cssで達成できるのか、それともjQueryが必要になるのかわかりません。

4

3 に答える 3

0

ボックス 4 の子として 2 番目のメニューを設定できます。ボックスを position:relative に設定し、メニュー 2 をボックス 4 の上に負のトップを指定して絶対に配置します。

あなたのフィドルバージョン20を見てください

編集：

コンテナー div を使用して STLRick のソリューションをすばやく修正すると、使用できると思われる結果が得られます。

基本的に、アセンブリ全体をコンテナーにラップしてから、menu2 を相対コンテナーに対して絶対にすることにより、menu2 をコンテナーの右上隅に絶対に配置できます。メニューの場所と四角形の場所に関してレイアウトが変わらない限り、常に右上に配置する必要があります。

#container {
    max-width: 900px;
    position relative;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    top: 10px;
    right:120px;
    position: absolute;  
}

http://jsfiddle.net/L2Deq/41/

これは非常に近いですが、ボックスが間違ったものになる原因となっているウィンドウ幅のスポットがあります。それらは非常に小さなスポットです (2 ～ 5 ピクセル)。

http://jsfiddle.net/L2Deq/60/

そしてもう少し近い：

http://jsfiddle.net/gL22f/5/

于 2012-11-20T21:34:00.093 に答える
0

コンテナーを外側に巻き付け、最大幅を設定し、レイアウトを絶対ではなく相対に変更し、css Float 属性を使用してすべてを適切に配置しました。これはまさにあなたが望んでいるものではないと確信しています (メニューは 100px 単位で移動するのではなく、流動的に移動します) が、フィドルと CSS の変更は次のとおりです。

http://jsfiddle.net/L2Deq/21/

#container {
    max-width: 900px;
}

#menu {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

#menu-right {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-left: 10px;
    margin-top: -60px;
    position: relative;
    float: right;
    margin-right: 25px;
}

.clear {
    clear: both;
}

#testing {
    font-family: Georgia, Arial, sans-serif;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
}

.boxes {
    background-color: red;
    height: 100px;
    width: 100px;
    margin-right: 8px;
    margin-bottom: 8px;
    display: block;
    float: left;
}

#boxed {
    position: absolute;
    left: 20px;
    margin-right: 12px;
    top: 64px;
    width: auto;
    float: left;
    z-index: 9998;
}
于 2012-11-20T21:34:45.140 に答える
0

ボックスのラッピング間隔と一致する間隔でメニューを整列するには、メディア クエリまたは JavaScript を使用する必要があります。jQuery を使用することをお勧めします。メディア クエリのブレークポイントをすべて書き直すことなく、ボックス サイズを変更する柔軟性が最も高くなるためです。

これは、あなたが望む結果をレンダリングすると思うスニペットです。

$(document).ready(function() {
    // Position the menu on document ready.
    positionMenu();

    // Bind it to run when the window resizes
    $(window).resize(function(){
        positionMenu();
    });
});

function positionMenu() {
    // Get the top-offset of the first box.
    var toprowoffset = $('.boxes:first').offset().top;

    // All the boxes with the same top-offset is in the top row - add class top to them.
    $('.boxes').each(function(){
        $(this).toggleClass('top',$(this).offset().top == toprowoffset);
    });

    // The last box in the top row is the one we want to align to.
    var alignbox = $('.boxes.top:last');

    // Calculate and set the right margin for the menu using the alignbox position.
    var marginright = $(document).width() - alignbox.position().left - alignbox.width();
    $('#menu-right').css('margin-right',marginright);
}​

そして、これが動作中の jsfiddle-link です。

于 2012-11-20T23:22:41.413 に答える