Question

我在单击菜单按钮时尝试调整使用JavaScript居中的div的宽度，但是当我执行宽度更改时，它会将元素设置为向下约20px。这在contentSectionLeftSide之上创建了一个很大的空洞。

以下是我所拥有的：

 function setButtonH(e){

    var item = e;
    var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];

    if(e==items[1])
    {
        document.getElementById("contentSectionLeftSide").style.width="600px";
        document.getElementById("contentSectionRightSide").style.width="300px";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
    }
    else {
        document.getElementById("contentSectionLeftSide").style.width="45%";
        document.getElementById("contentSectionRightSide").style.width="45%";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
     }
  }

HTML

 <nav id="menu_item">


        <div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">

                Home

        </div>


        <div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">

                Interests

        </div>

        <div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">

                Creations

        </div>


        <div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">

                Bio

        </div>

    </nav>



 #contentSectionLeftSide{

    padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
 }
 #contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
}

Answer 1

我想我现在处理了这种情况，并在本地重新创建代码我确实注意到左侧内容部分上方有一个小间隙。

问题在于，因为div s'内容（可能）导致div高度不同，display: inline-block CSS声明会导致它们彼此垂直对齐底部基线，所以你需要做的就是告诉CSS将它们垂直对齐到顶部。

我在您提供的HTML下面构建了这样的左侧和右侧内容区域：

<nav id="menu_item">
    <div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
    <div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
    <div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
    <div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>

<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
    Right side content!<br />
    There's a little more content in here!
</div>

我还从menuGo(#)删除了onClick函数，因为我不知道该功能在哪里。旁注：这里要小心，就像上面的代码一样（例如）：

onclick="setButtonH('menu_item2'), menuGo(2)"

它应该在哪里：

onclick="setButtonH('menu_item2'); menuGo(2)"

这可能会产生问题。

然而，回到解决方案，您需要做的就是在每个内容区域的样式声明中添加行vertical-align: top;，并且它们将有效地对齐到顶部：

#contentSectionLeftSide {
    padding:10px;
    margin-bottom:4px;
    background:#EFEFEF;
    -webkit-border-radius:5px;  
    display:inline-block;
    vertical-align: top; /* extra CSS... */
}

#contentSectionRightSide {
    padding:10px;
    margin-bottom:4px;
    background:#EFEFEF;
    -webkit-border-radius:5px;  
    display:inline-block;
    vertical-align: top; /* extra CSS... */
}

Here's a working fiddle让你看到它的实际效果。希望这有帮助，祝你好运，并保持编码！：）

javascript设置宽度尺寸更改元素位置

1 个答案: