Question

点击左侧（绿色）DIV，我想显示第四个DIV：

var a = document.getElementById("myDropdown")
var b = document.getElementById("begueradj")
b.addEventListener("click", func)
function func() {
    var c = a.getAttribute("class")
    console.log(c)
    if(c == "dropdown-content") {
        a.setAttribute("class", "hide")
    }else {
        a.setAttribute("class", "dropdown-content")
    }
}

这是输出：

我想把灰色的DIV向下推，然后离开：

向左，使其与绿色DIV对齐
向下，以便当绿色和蓝色DIV形成的第一行结束时开始。

注意：我在min-height中设置的.row是可变的。

JS Fiddle.

Answer 1

你的代码很好，你所要做的就是移动你的html。这样，您的菜单将始终位于顶部div之下，并在您需要之前隐藏。

<div class = "col-2"> 
        <div id = "begueradj"> Press</div>

    </div>
    <div class = "col-10" align-text = "right" > Right DIV</div>
</div>
<div id = "myDropdown" class = "dropdown-content">
            <p>Home</p>
            <p>About</p>
            <p>Contact</p>
        </div>

 <div class = "row">
    <div class = "col-12">
    Nulla cursus commodo placerat. Mauris id arcu congue, rho 
    </div>
 </div>

Answer 2

https://jsfiddle.net/5gc5nrec/15/

win timestamp: b"\xc0\x65\x31\x50\xde\x09\xd2\x01"
datetime repr: "2016-09-08 07:35:57.996998"
new timestamp: b"\x80\x44\x99\x4f\xde\x09\xd2\x01"

Answer 3

像这样更改.dropdown-content的CSS设置（根据需要调整min-width）：

.dropdown-content {
    position: absolute;
    background-color: gray;
    padding: 0 10px;
    left: 8px;
    top: 47px;
    min-width: 120px;
}

小提琴：https://jsfiddle.net/czznxhbz/

Answer 4

如果你只是想按照你指定的方式排列它，那么这应该有效：

.dropdown-content {
   display: block;
   position: absolute;
   float : left;
   background-color: gray;
   width : 50%;
   left:8px;
   top:68px;
}

Answer 5

问题是，您已将.drop-down纳入.col-2 div中，并为其提供了padding: 10px。您需要将.col-2 div中的较早值设为margin-top div，并将.row设为60px，因为您将{{1}}的最小高度设置为60px。

这是fiddle

Answer 6

更改您的css以获取下拉内容

看看：JsFiddle

.dropdown-content p{
   padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#begueradj{
   padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

DIV位置调整

6 个答案: