Javascript 定心动态宽度Divs

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

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

我需要将页面上的两个div居中。例如，如果第一个div的宽度为600px（由其内部数据指示），而第二个div的宽度为固定的200px，则中心点为400px

如果调整浏览器窗口的大小，我不希望第二个div结束

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

---

我创作了这把小提琴来帮助说明

用div环绕它们，并将其样式设置为：

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

---

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

用div环绕它们，并将其样式设置为：

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

---

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

您可以通过以下代码实现这一点：

HTML:

预览：

您还可以通过将这两个元素包装在一个容器中，将它们都设置为

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>

---

预览：

您可以通过以下代码实现这一点：

HTML:

预览：

您还可以通过将这两个元素包装在一个容器中，将它们都设置为

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>

---

预览：

OP特别指出容器宽度未知。我已经决定，如果不添加容器div并使用javascript，我就无法做到这一点。它实际上可以正常工作，但我有点担心跨浏览器兼容和页面加载时的“flash”。OP特别指出容器宽度未知。我决定，如果不添加容器div并使用javascript，我就无法做到这一点。它实际上工作正常，但我有点担心跨浏览器兼容和页面加载时的“flash”。您示例中的变量列并不是真正的变量。只需在css中将宽度设置得稍大一点，就会破坏它。在我的场景中，直到运行时我才知道变量列的宽度。我做了一些编辑-这应该可以防止页面闪烁。示例中的变量列不是真正的变量。只需在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; }