javascript设置宽度维度更改元素位置

我试图在单击菜单按钮时使用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

家
兴趣
创作
生物
#内容部分左侧{
填充：10px；
利润底部：4倍；
背景：#efef；
-webkit边界半径：5px；
显示：内联块；
}
#内容部分右侧{
填充：10px；
利润底部：4倍；
背景：#efef；
-webkit边界半径：5px；
显示：内联块；
}

我想我现在已经掌握了情况，在本地重新创建代码时，我确实注意到左侧内容部分上方有一个小间隙

问题是，由于

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>

应在哪里：

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... */
}

让你看到它的作用。希望这有帮助，祝你好运，继续编码吧！：）
 任何HTML都可以使用吗？
contentSectionLeftSide
和
contentSectionRightSide
元素在哪里？还有没有其他CSS与这个HTML关联？就像来自外部样式表？这里是CSS。现在真的很困惑：（当我向div元素添加文本时，问题似乎出现了。哇哦！你解决了它。你真的是万王之王！哈哈！或者只是一个强迫症失眠患者；）
onclick="setButtonH('menu_item2'); menuGo(2)"

#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... */
}