Question

我正在尝试使用javascript和css进行隐藏/显示，而我的div正在堆叠而不是并排排列。我已设置宽度并浮动...我无法弄清楚发生了什么。非常感谢任何帮助。

#container {
width: 760px;
margin: 20px auto;
padding: 30px;
background-color: #000;
border-width: 0px;
color: #fff;
}
#1a {
width: 300px;
float: left;
margin:10px
background-color: #000;
}

#1b {
width: 400px;
margin: 10px;
background-color: #000;
}

和html：

<div id="container">
<div id="1b" class="hidden">
Module Details:
My First Page
</div>
<div id="1a">
<a href="javascript:unhide('1b');">01</a>
</div>

我一直在搞乱它，现在第二个div在第一个中间...所以这里有一个链接，如果这也是有用的： http://www.amandasmithsf.com/m14_SMITH_demo/test.html

Answer 1

<强>更新

在Firebug中检查你的CSS，我注意到它没有被应用，然后我看到了原因 - HTML ID不应该以数字开头（或者至少，如果你想让它们使用CSS {{1 }}选择器;事实证明，在HTML5中，他们决定开始允许以数字开头的ID，但是您必须使用不同的策略来使用CSS选择它们：http://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/）。

使用字母而不是数字启动ID使其起作用：

原始答案

我认为您只需要将<style> .hidden {display:none} #container { width: 760px; margin: 20px auto; padding: 30px; background-color: #000; border-width: 0px; color: #fff; } #b1 { float: left; width: 300px; margin:10px; background-color: #000; } #a1 { float:left; width: 10px; margin: 10px; background-color: #000; } </style> <script> function unhide(id) { document.getElementById(id).style.display = 'block'; } </script> <div id="container"> <div id="b1" class="hidden"> Module Details: My First Page </div> <div id="a1"> <a href="javascript:unhide('b1');">01</a> </div> </div>添加到float: left;。

或者，如果由于某种原因你真的只想将#1b分配给其中一个，那么它需要是float: left; - 浮动元素需要在非浮动元素旁边你想要它显示。

隐藏/显示不是并排的Div

1 个答案: