Question

我正在尝试制作一个静态高度和可变宽度的div。有多个水平标签。活动选项卡应水平拉伸以填充容器，非活动选项卡应缩小回其非活动大小（在这种情况下为24px）。

我无法让它发挥作用。标签拉伸，但太多了。它会突破后面的标签到下一行，这不会发生。我无法弄清楚如何使这项工作像我想要的那样。

我正在尝试做的事情可以在[链接删除]

中看到

我确信这是一种方法，就像我之前看过的那样，但我找不到它的一个例子。知道我做错了吗？

Answer 1

你在寻找水平手风琴吗？

网上有几个例子。如果您希望打开的标签占据容器标签宽度的所有空间，最好依靠Javascript进行计算。

Answer 2

<style>
#navigation
{
   border: 1px solid #000000;
   height: 400px;
   margin: 10px 25px;
   padding: 0px;
   width: auto;
}
.item
{
   display: block;
   float: left;
   height: 100%;
   margin: 0px;
   overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
   width: 10%;
}
.open
{
   width: 80%;
}

</style>

</head>

   <body>
      <div id="navigation">
         <div class="item open">
            <img src="hometab.png" alt="Home" />

            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>

      </div>

Answer 3

{1}} width:auto对#navigation的承诺程度如何？

如果您将#navigation的宽度设置为固定值，并为.open设置了合适的宽度值，那么它看起来还不错。

当我在FireBug中使用您的示例时，我使用了400作为#navigation而使用了350作为.open，它似乎运行良好。

Answer 4

额外的项目可能会碰到下一行，因为打开标签的宽度是100％ - 尝试将其设置为80％或90％，为其后的额外“标签”留出空间。 “关闭”标签应该也应该有一个百分比宽度，这应该加在一起等于100％ - 它们的容器的整个宽度。

Answer 5

以下方法对我有用：

设“w”为div的原始宽度，并希望用“x”像素拉伸它。在其上添加以下CSS：

{
    width: 350px;
    margin-left: -25px
}

e.g。如果原始宽度为300px并且您希望将其拉伸50px，则额外的CSS将为：

SELECT COUNT(*)  FROM
(
(SELECT * FROM task.tableA EXCEPT SELECT * FROM task.tableB)
UNION
(SELECT * FROM task.tableB EXCEPT SELECT * FROM task.tableA)
)

css水平拉伸浮动div

5 个答案: