Объединение двух DIV с помощью float: right - PullRequest
Новая
       20

Объединение двух DIV с помощью float: right

2 голосов
/ 10 июня 2011

Привет, я пытаюсь создать раскрывающееся меню, используя DIV, но столкнулся с проблемой, которую не могу понять, как ее преодолеть.Давайте посмотрим на код ниже: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu").click(function () {
                $('#menuItem').slideDown('slow');
            });
        });
    </script>
</head> 
<body> 
    <div style="width: 500px; margin: 0px auto; padding: 10px;">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

Все, чего я хочу достичь, это сделать так, чтобы мое слайд-меню оставалось поверх элемента div.Пожалуйста, посоветуйте, как это можно сделать.Большое спасибо!

:)

Ответы [ 2 ]

2 голосов
/ 10 июня 2011

Быстро и грязно: я добавил абсолютно позиционированный внешний элемент для меню, а затем применил top:40px к содержимому div, чтобы опустить его, чтобы компенсировать высоту меню. 

<div style="position:absolute;width:100%;">
    <div style="width: 500px; margin: 0px auto; padding: 10px; ">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right;  display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>
</div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;  position:relative; top:40px; ">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" clear:both;  z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

Когда я набираю это, Дотти уже ответил передо мной с почти идентичным подходом. Однако в приведенном выше коде отдельные меню div правильно плавают рядом друг с другом, как вы хотите, как они это делают в первом коде, который вы опубликовали в вопросе.

Возможно, есть некоторые div и элементы стиля, которые сейчас немного избыточны.

Редактировать: Теперь мне приходит в голову, что работа меню в коде Дотти, вероятно, на самом деле такова, как вы намеревались , чтобы меню было.

0 голосов
/ 10 июня 2011

Поместите div #menuItem внутри div #menu, установите абсолютное значение позиции div #menuItem и удалите его число с плавающей точкой. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").click(function () {
            $('#menuItem').slideDown('slow');
        });
    });
</script>
</head> 
<body> 
<div style="width: 500px; margin: 0px auto; padding: 10px;">

    <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
        My Menu

        <div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>

    </div>
</div>

<div style="margin: 50px 0px; padding: 0px; text-align: center;">
    <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
        <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
    </div>
    </div>
</body>
</html>
...