我这里有一个程序 jsfiddle ,我想知道我应该如何让 div 遍历所有内容。绕过一切我的意思是在一切周围都有边界。 (加上更有效的 jQuery 代码,我们将不胜感激;)。)这是代码:
div {
border:2px red outset;
}
div#container {
width:50%;
}
div.section {
position:relative;
width:48%;
display:inline;
float:left;
}
h3 {
display:inline;
width:48%;
float:left;
margin:0.65;
text-align:center;
} a {
display:inline;
width:23%;
float:left;
margin:0.65%;
text-align:center;
}
还有我的 HTML:
<div id="container">
<h3>Section 1</h3>
<h3>Section 2</h3>
<br />
<br /> <a href="#sec1" class="hide">Hide</a><a href="#sec1" class="show">Show</a>
<a href="#sec2" class="hide">Hide</a><a href="#sec2" class="show">Show</a>
<div id="sec1" class="section">Some content</div>
<br />
<div id="sec2" class="section">Some more content</div>
</div>
将 overflow:auto
添加到您的容器 div:
div#container {
width:50%;
overflow:auto;
}
jsFiddle example
当您 float 子项时,随着 float 的子项从文档流中移除,父项实质上会缩小。添加溢出规则可恢复您期望的布局。而且您的 jQuery 看起来不错。
我是一名优秀的程序员,十分优秀!