Question

无论宽度是多少，两个浮子可以并排吗？

基本上我有以下内容：

#container { height: 100%; width: 100%; overflow: auto; background-color: #F6F9FF; }
#navigation { height: 100%; width: 300px; float: left; overflow: auto; background-color: green;} 
#content { float: left; background-color: blue;}

<div id="container">
<div id="navigation">
    <ul>
        <li>1. nav stuff </li>
        <li>1. nav stuff </li>
        <li>1. nav stuff </li>
    </ul>
</div>
<div id="content">
    <p>Lorem ipsum snip....ultricies.</p>
</div>
<div>

我希望导航和内容始终并排。导航的初始宽度为300px，但是您可以使用jquery关闭它，然后它只需要15pxs。我希望内容始终填充容器的剩余部分。现在我不断得到它，所以当宽度变小时，内容会在导航下方被撞到。

这是jsfiddle的链接，以帮助显示我正在谈论的内容。

http://jsfiddle.net/M9sZd/2/

Answer 1

根据浏览器的不同，并排浮动有时会很棘手。（我发现IE的问题并且使用率达到100％）

我将导航和内容区域更改为使用基于％的宽度 - （20％/ 80％），这似乎很容易让它们彼此相邻。

Link with %-Based Widths

您是否考虑过使用类似“拆分器”的东西来分隔内容和导航并使其可调节？

jQuery Splitter

我最近使用了类似的东西，它确实适用于我想要完成的任务。您可以明确地调整区域的宽度 - 当您使用类似于下面的内容更改导航宽度时：

var containerWidth = $("#container").width();

onChange()
{
     $("#navigation").css("width", 15px);
     $('#content").css("width", containerWidth - 15);
}

原谅伪代码，它已经脱离了袖口。

无论如何 - 我希望你能够使用的东西：）

Answer 2

这非常通用。有很多方法可以实现这一点，我会告诉你我是如何做到的（当然是使用JavaScript）。有两种情况：1。导航扩展和2.导航折叠。我使用position: absolute进行导航，并使用相应的宽度，同时在容器上有填充以容纳导航的宽度，并根据情况向容器添加一个类。

#navigation { position: absolute; left: 0; top: 0; width: 300px; }
#navigation.collapsed { width: 15px; }
#container { position: relative; padding-left: 300px;}
#container.nav-collapsed { padding-left: 15px; }

唯一的风险是导航高于内容，并且会被修剪。您可以通过在容器上使用min-height来阻止这种情况。

并排浮动

2 个答案: