Question

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

但是，菜单永远不应该崩溃，并且应该始终占用所有可用空间。标题可以崩溃，但应尽可能长时间使用所有可用宽度。

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

http://cdpn.io/tBskv

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

但是，我真的就像没有任何Javascript的CSS解决方案一样。它最好适用于IE8，但如果只有现代浏览器的解决方案，我愿意做出妥协。

Answer 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 }即可获得此答案中提到的代码解决方案。

有点你在找什么？

Answer 2

不幸的是，只有CSS才能实现这一点 - 如果您想使用IE8，则不行。

你必须计算填充div的可用空间，而calc（）的函数只适用于现代浏览器。

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

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中找到。

我希望它有所帮助。

带标题的响应式菜单：具有占用所有可用空间的调整大小标题

2 个答案: