0

我正在尝试使用 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 在第一个 div 的中间......所以如果这也有帮助，这里有一个链接：http: //www.amandasmithsf.com/m14_SMITH_demo/test.html

4

1 回答 1

0

更新

在 Firebug 中检查你的 CSS，我注意到它没有被应用，然后我明白了原因——HTML ID 不应该以数字开头（或者至少，如果你希望它们与 CSS#选择器一起工作，则不应该；事实证明，在 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;给其中一个，则它需要是#1b- 浮动元素需要位于您希望它显示的非浮动元素之前。

于 2013-05-11T02:49:10.110 回答