Css 三列设计，动态宽度左+；右侧和右侧

我想有一个动态的三列设计，中间有一个静态宽度（例如250px）和左+右列的动态宽度。因此，即使没有相同的浏览器宽度，每个用户都可以使用它。同样重要的是，第二个div确实位于窗口的中心

HTML

<div id="header">
    <div id="navigation_left">left</div>
    <div id="navigation_center">center</div>
    <div id="navigation_right">right</div>
</div>

到目前为止的问题是，有时左+右div太小或太大，因为我说它们硬编码为80px。有办法解决这个问题吗

---

这可以通过CSS3完成。设置左栏和右栏的宽度。假设每个50像素。然后通过计算设置中间列的宽度

-webkit-calc(width: 100% - 100px) /* -50px per column equals 100px */
-moz-calc(width: 100% - 100px) /* -50px per column equals 100px */
-o-calc(width: 100% - 100px) /* -50px per column equals 100px */
-ms-calc(width: 100% - 100px) /* -50px per column equals 100px */
calc(width: 100% - 100px) /* -50px per column equals 100px */

---

但是，这在较旧的浏览器中不起作用，但您可以通过为每列设置一个宽度百分比作为备用设置来实现。

这可以通过CSS3实现。设置左栏和右栏的宽度。假设每个50像素。然后通过计算设置中间列的宽度

-webkit-calc(width: 100% - 100px) /* -50px per column equals 100px */
-moz-calc(width: 100% - 100px) /* -50px per column equals 100px */
-o-calc(width: 100% - 100px) /* -50px per column equals 100px */
-ms-calc(width: 100% - 100px) /* -50px per column equals 100px */
calc(width: 100% - 100px) /* -50px per column equals 100px */

但是，这在较旧的浏览器中不起作用，但您可以通过为每列设置一个宽度百分比作为回退来接近它。

尝试以下方法：

首先，将您的“导航”中心移到“导航”下方的右侧，这样它就不会被最新版本重叠

<div id="header">
    <div id="navigation_left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_right">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.
    </div>
</div>

实例 试试这个：

首先，将您的“导航”中心移到“导航”下方的右侧，这样它就不会被最新版本重叠

<div id="header">
    <div id="navigation_left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_right">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div id="navigation_center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates consectetur veritatis fugit aspernatur quo repellendus corrupti perferendis inventore dignissimos sapiente ea ullam libero consequatur voluptatibus quam sint deleniti dolor illo molestias numquam ex iusto incidunt quidem.
    </div>
</div>

实例

---

使用百分比并设置最小宽度和最大宽度？中心div肯定应该是250px，而不是百分比。在现实中，它将是1000px，但对于演示/问题，250px更容易。当然中间可以是250px，但在外部div上，您可以将它们设置为百分比，当然？您最好在父div中设置一个宽度，以使其更简单。如果要适合用户屏幕，请使用媒体查询/javascript获取仍然不起作用的窗口维度，因为我不知道百分比。使用百分比并设置最小宽度和最大宽度？中心div肯定应该是250px，而不是百分比。在现实中，它将是1000px，但对于演示/问题，250px更容易。当然中间可以是250px，但在外部div上，您可以将它们设置为百分比，当然？您最好在父div中设置一个宽度，以使其更简单。如果要适合用户屏幕，请使用媒体查询/javascript获取仍然不起作用的窗口维度，因为我不知道百分比。calc为+1（我不知道）。我喜欢另一个解决方案，因为它应该支持ie6等+1的计算（我不知道那个）。我喜欢另一个解决方案，因为它应该支持ie6等。