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

我试图调整一个div的宽度，它是使用JavaScript在点击菜单按钮时居中的宽度，但是当宽度改变确定但它也将元素向下设置大约20px 。这创造了一个大于contentSectionLeftSide的空白空白。javascript设置宽度尺寸更改元素位置

下面是我得到了什么：

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; 
}

来源

2013-10-13 josh

任何HTML去与此？ –

刚刚添加了HTML。 – josh

'contentSectionLeftSide'和'contentSectionRightSide'元素在哪里？是否还有其他与此HTML关联的CSS？像来自外部样式表？ –

我觉得我对形势有把握现在，并重新创建你的代码在本地我注意到上面的一个小缺口留下内容部分。

的问题是，因为你的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让你看到它的行动。希望这会有所帮助，祝你好运，并保持编码！ :)

来源

2013-10-14 19:56:46

Wahhooo！你修好了它，你真的是一个国王的王！ – josh

Hahahaha！或只是一个迷恋失眠;） –

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

回答

相关问题