Question

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

2列是剩下浮动的div。我需要做两件事。

我需要将页面上的2个div放在中心位置。例如，如果第一个div的宽度为600px，由内部数据决定，第二个div是固定的200px，则中心点为400px。
如果调整浏览器窗口的大小，我不希望第二个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; }

预览：http://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; }

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

居中动态宽度Div

2 个答案: