居中动态宽度 Divs

Question

我有一个有 2 列的页面。第一列是动态宽度。它在表格中包含一堆表格数据。第二列是一个固定宽度的导航栏。

2 列是左浮动的 div。我需要完成两件事。

1. 我需要将页面上的 2 个 div 居中。例如，如果第一个 div 是 600px 宽，由它内部的数据决定，而第二个 div 是固定的 200px，则中心点是 400px。

2. 如果调整浏览器窗口的大小，我不希望第二个 div 折叠。

我在想我可能必须将 2 个 div 嵌套在另一个 div 中，使用 javascript 设置父 div 宽度，然后将其居中。

我创建了这个小提琴来帮助说明。 http://jsfiddle.net/darthg8r/uhKdt/

Answer 1

用 div 包围它们并将其样式设置为：

width: ( whatever you need )
margin: 0 auto; // this centers the div

如果需要，您可以使用 JavaScript 动态设置宽度。只要它小于周围容器的 100%，它就会保持居中。

Answer 2

您可以使用以下代码实现此目的：

HTML：

<div id="wrapper">
    <div id="container">
        <div id="variable">test</div>
        <div id="fixed">test</div>
    </div>
</div>

CSS：

#wrapper { overflow: hidden; }
#container { 
    float: left;
    position: relative;
    left: 50%; }
#container > div {
    float: left;
    position: relative;
    right: 50%;
    height: 300px; }
#variable { 
    background: red;
    width: 300px; }
#fixed { 
    background: blue;
    width: 200px; }

预览：https://jsfiddle.net/Wexcode/mreLt/

您也可以通过将两个元素包装在一个容器中来实现此效果，将它们都设置为display: inline-block，最后将它们的容器设置为text-align: center。
答案是比这更复杂一点，所以如果你想选择这条路线，请告诉我。

要使元素不会落到下一行，请使用inline-block。

<div id="container">
    <div id="variable">
        <p>test</p>
    </div><div id="fixed">
        <p>test</p>
    </div>
</div>

CSS：

body { margin: 0; }
#container { 
    color: #fff;
    text-align: center;
    white-space: nowrap; }
#container > div {
    height: 300px;
    display: inline-block; }
#variable { 
    background: red;
    width: 100px; }
#fixed { 
    background: blue;
    width: 200px; }

预览：https://jsfiddle.net/Wexcode/mreLt/2/