这是这篇文章 (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling) 的后续文章。
这是图示要求 (/www.creativesplash.net/images/2.gif)。这是我的achieved迄今为止。
在浏览器调整大小时应该发生 2 件事:
- 标签应移至下方(已实现)
- 首选项应占据 100% 的宽度 + 应应用边框将其与选项卡分开!这是我需要您帮助的地方(纯 css 解决方案或 javascript 解决方案)!!
编辑:原型(prototype)解决方案会很棒!
预先感谢您的帮助!
维桑
最佳答案
JavaScript？ Pshaw，我想我们可以用简单的 CSS 来管理它，是吗？
这是一个概念证明。当它适合一行时，它依赖于隐藏选项卡内容后面的第二个边框。完成样式并确保它与您选择的特定字体保持一致，留给不那么懒惰的人作为练习。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<title> tabs test </title>
<style type="text/css">
#nav { border-bottom: 1px solid silver; }
#prefs { float: right; padding: 0.7em 0; }
#tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
#tabs a {
display:-moz-inline-stack; display:inline-block;
margin-right: 0.7em; padding: 0.3em 0;
width: 7em; text-align: center; background: silver;
}
#tabs a.selected {
position: relative; z-index: 2;
background: white; border-width: 1px; border-style: solid; border-color: black black white;
}
#content { clear: right; border-top: 1px solid silver; }
#content .wrap {
clear: left; position: relative; z-index: 1; top: -0.6em;
background: white; border: solid black 1px;
padding: 1em;
}
</style>
</head><body>
<div id="nav">
<a href="n1">Sample links</a> |
<a href="n2">blah</a>
</div>
<div id="prefs">
<a href="p1">Preference 1</a> | <a href="p1">Preference 2</a>
</div>
<div id="tabs">
<a href="t0" class="selected">Active Tab</a>
<a href="t1">Tab 1</a>
<a href="t2">Tab 2</a>
<a href="t3">Tab 3</a>
</div>
<div id="content"><div class="wrap">
Lorem ipsum dolor sit amet blah blah blah.
</div></div>
</body></html>
这使用内联 block 来阻止标签在它们自己不适合屏幕时换行。你可能想要也可能不想要那个，我不知道。如果不是，将该行更改为简单的 float 。
关于宽度未知的 div 所需的 Javascript/CSS 解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1422024/