1

考虑这种情况：我有一个带有标题和菜单栏的页面，在同一行对齐。该网站是响应式的，我希望标题和菜单都具有最佳的可用宽度。

但是，菜单不应该折叠，并且应该总是占用所有可用空间。标题可以折叠，但应尽可能长时间使用所有可用宽度。

这可能有点模糊，所以我在这里创建了一个 jQuery 解决方案：

http://cdpn.io/tBskv

尝试调整浏览器窗口的大小，使菜单与标题重叠以理解我的意思。

但是，我真的很想要一个没有任何 Javascript 的 CSS 解决方案。最好它应该在 IE8 上运行，但如果有一个仅适用于现代浏览器的解决方案，我愿意做出一些妥协。

4

2 回答 2

1

这实际上可以通过 CSS 实现，并且在 IE8 中使用display:table-cell和white-space:nowrap适当时也是可以的。我将针对您的问题的 CSS 解决方案发布在

http://codepen.io/anon/full/HhCFB

此解决方案允许右侧的菜单永不折叠，左侧的标题为完整的标题宽度，或者在页面变得太小时时折叠到可用宽度。

简而言之：

<div class="wrap">
    <span>a long example title</span>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

<style>
    .wrap {
        display: table;
    }

    span {
        display:table-cell;
    }

    ul {
        display: table-cell;
        white-space: nowrap;                   
    }

    li {
        display: inline-block;
        margin-right: 20px;
    }
</style>

并确保标题和菜单都充当列，这样它们就不会在彼此下方浮动display:table。display:table-cell不让菜单崩溃的诀窍是white-space:nowrap在ul. 现在，当页面变得太小时，标题将是唯一的换行符。

在上面提到的 codepen 解决方案链接中，还添加了一个变体，以确保标题跨度永远不会大于其内容的宽度。这样菜单也将坚持标题。只需注释掉.outer{ float:left }即可获得此答案中提到的代码解决方案。

有点你在找什么？

于 2013-06-19T06:32:04.843 回答
0

不幸的是，仅使用 CSS 是不可能的——如果你想使用 IE8 就不行。

您必须计算可用空间来填充其中的 div，而 calc() 的函数仅适用于现代浏览器。

我创建了两个主题来搜索百分比容器的响应式解决方案，结果在此处和此处。

JavaScript 的最终解决方案是这样的：

/** Centralize the main container **/
function calculateMainContainerWidth() {
    $realWidth = $(".main-container").width() - $(".right").outerWidth(),
    $containerContent = $(".left");
    $containerContent.css("width", $realWidth);
};

$(window).on("resize", function() {
    calculateMainContainerWidth();
});

calculateMainContainerWidth();

也可在FiddleJS中使用。

我希望它有所帮助。

于 2013-06-17T13:05:17.837 回答