【问题标题】:Javascript / CSS solution required for a div with unknown width未知宽度的 div 需要 Javascript / CSS 解决方案
【发布时间】:2009-09-14 14:46:47
【问题描述】:

这是本文的后续内容 (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling)。

这是图示要求 (/www.creativesplash.net/images/2.gif)。这是我到目前为止achieved 的内容。

在浏览器调整大小时应该会发生 2 件事:

  1. 标签应移至下方(已实现)
  2. 首选项应占 100% 宽度 + 应应用边框将其与选项卡分开!这就是我需要你帮助的地方(纯 css 解决方案或 javascript 解决方案)!!

编辑:原型解决方案会很棒!

提前感谢您的帮助!

瓦桑特

【问题讨论】:

    标签: javascript html css


    【解决方案1】:

    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>
    

    当它们不适合自己的屏幕时,这使用内联块来阻止标签换行。你可能想要也可能不想要,我不知道。如果不是,则将该行更改为简单的浮点数。

    【讨论】:

    • 有趣,但是当它们在一行上时,选项卡和首选项之间不会在选项卡之间显示,它们之间存在空间? span>
    • @bobince:哇!伟大的!感谢您花时间提供代码。我确实试过这个,问题是实际上标签比我正在开发的线框中的标签要高。你有什么想法?
    • Vasanth:我不明白为什么会有问题,只需调整垂直填充样式直到适合。我用了“他们”;如果您确定要获得准确的尺寸,您可能需要在“px”中设置字体和填充。 jeroen:不,额外的“clear:left”将该元素带到左侧选项卡的底部。
    • @bobince:这很好用。我对不存在但也不缺席的边框有点担心 :) 总的来说,我很高兴注意到这在 CSS 中是可以实现的,谢谢!
    【解决方案2】:

    我不只知道 css,但是在 javascript 中,您可以获得两个 ul 的宽度,将其与父级的宽度进行比较,如果更大,则在您的偏好 ul 中添加新样式,将其设置为 100 % 宽度并添加底部边框。

    快速 jQuery / javascript 解决方案(未测试...):

    $(document).ready(function() {
        $('.ArticleTabs').foreach(function(){
            if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
                $(this).find('.tabs').addClass('underlined_class');
            }
        });
    });
    

    您需要在这部分 javascript 之前添加 jQuery。例如来自 Google(如果您不自己托管):

    <script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    

    【讨论】:

    • 是的。再次感谢您的提示。这就是我想采取的方法!但是我对JavaScript一无所知,所以我正在寻找即插即用代码:(
    • 哇。谢谢你。将测试并回复您!
    • @jeroen:真快!它看起来确实正确,但似乎不起作用。你能看一下吗? creativesplash.net/experiment
    • 这是一个 jQuery 解决方案,因此您需要在 javascript 的其他部分之前包含 jQuery。只需在头部添加以下内容(Google 托管的 jQuery 库):
    • 糟糕!抱歉没注意,这么晚才通知你。但是我们已经在广泛使用 Prototype。能否请您为 Prototype 写点东西?
    【解决方案3】:

    边框问题是因为 UL 上有背景。当 LI 换行时,您也会得到背景换行。

    看来你想要这样的东西。

    #Features_Row{
       border-bottom:1px solid #D2E0C0;
       padding-bottom:3px;
    }
    

    【讨论】:

    • @easement:感谢您回来。我必须动态地将边框应用于类 .prereferences 。当首选项位于选项卡的右侧时,不需要边框。但是当首选项向上移动时,它必须占用 100% 的宽度以及底部的边框。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-31
    • 1970-01-01
    • 1970-01-01
    • 2023-01-26
    • 2017-10-02
    • 2013-12-16
    相关资源
    最近更新 更多