具有未知宽度的div所需的Javascript / CSS解决方案 [英] Javascript / CSS solution required for a div with unknown width
问题描述
这是此文章的后续（www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling）。
这是说明的要求（/www.creativesplash.net/images/2.gif）。这是我到目前为止实现的。
在浏览器上调整大小时，会发生以下情况：
- 标签应该移到下面（已经实现）
- 首选项应该占据100％宽度+应该应用边框将其自己与标签分离！这是我需要您的帮助（纯CSS解决方案或JavaScript解决方案）的地方!!
EDIT
Vasanth
>JavaScript？ Pshaw，我想我们可以在简单的CSS中管理它，不是吗？
这里是一个概念证明。它依赖于在适配在一行上时将选项卡内容后面的第二个边框隐藏。
完成整理样式并确保其符合您选择的字体， <！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =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;背景：银;
}
#tabs a.selected {
position：relative; z-index：2;
background：white; border-width：1px; border-style：solid;边框颜色：黑色黑色白色;
}
#content {clear：right; border-top：1px solid silver; }
#content .wrap {
clear：left;位置：相对; z-index：1; top：-0.6em;
background：white; border：solid black 1px;
padding：1em;
}
< / style>
< / head>< body>
< div id =nav>
< a href =n1>示例链接< / a> |
< a href =n2> blah< / a>
< / div>
< div id =prefs>
< a href =p1>偏好设定1< / a> | < a href =p1>偏好设定2< / a>
< / div>
< div id =tabs>
< a href =t0class =selected>有效标签< / a>
< a href =t1>标签1< / a>
< a href =t2> Tab 2< / a>
< a href =t3>标签3< / a>
< / div>
< div id =content>< div class =wrap>
Lorem ipsum dolor sit amet blah blah blah。
< / div>< / div>
< / body>< / html>
这使用inline-blocks来阻止标签封装，当他们不适合在屏幕上拥有。你可能或可能不想要，我不知道。如果没有，将该行更改为一个简单的浮动。
This is a followup to this post (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling).
Here's the illustrated requirement (/www.creativesplash.net/images/2.gif). Here's what I've achieved so far.
On browser resize 2 things should happen:
- The tabs should shift to below (already achieved)
- The preferences should take up 100% width + a border should be applied separating itself from the tabs! This is where I need your help (either a pure css solution or a javascript solution)!!
EDIT: A prototype solution would be great!
Thanks in advance for your help!
Vasanth
JavaScript? Pshaw, I think we can manage that in simple CSS, don't you?
Here's a proof of concept. It relies on hiding the second border behind the tab content when it fits on one line. Finishing off the styling and making sure it lines up with your particular choice of fonts is left as an exercise for someone less lazy.
<!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>
This uses inline-blocks to stop the tabs wrapping when they don't fit on the screen on their own. You might or might not want that, I don't know. If not, change that line to a simple float.
这篇关于具有未知宽度的div所需的Javascript / CSS解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
