javascript設置寬度尺寸更改元素位置

Question

我試圖調整一個div的寬度，它是使用JavaScript在點擊菜單按鈕時居中的寬度，但是當寬度改變確定但它也將元素向下設置大約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> 

我也是從onClick的去除menuGo(#)功能，因爲我不知道功能去了哪裏。邊注：這裏要小心，因爲在你上面的代碼讀取（例如）：

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讓你看到它的行動。希望這會有所幫助，祝你好運，並保持編碼！ :)