是的，所以我将网站放在 100% 宽度的包装器中。里面有两个div。一个以 900 像素的固定宽度向左浮动，并且...我试图让第二个在第一个 div 和屏幕右侧之间的剩余空间中居中。
我已经尝试过浮动左/右相对/绝对定位、自动边距等的变体，但都不起作用。
有人可以帮忙吗？
【问题讨论】：
这是一个在 div 上使用 CSS 表格设置的示例。调整大小和添加内容时，它可以很好地保持在一起。另一个好处是左右两列将保持相同的高度，并将环绕内容。如果您希望左右列看起来具有不同的高度，只需插入嵌套 div 并设置样式即可。
在第一个示例中，右侧 div 具有 text-align:center。嵌套的 div 是 display:inline-block ，它识别父级上的 text-align:center 。因此，嵌套的 div 是真正居中的。 Inline-block 也将环绕其内容的宽度，如果您的居中元素具有设定的宽度或较小的可变宽度，这将很有帮助。如果您的内容像示例一样填充其父级，只需设置一个最大宽度。
在第二个示例中，右侧 div 在左侧和右侧具有相等的填充以“居中”其内容。
注意：如果你支持 IE6 和 IE7 - CSS 表格设置和 inline-block 有很好的浏览器兼容性，除了 IE6 和 IE7。对于 css 表设置，有一个polyfill。 IE6 和 IE7 也不能识别 inline-block，但可以识别 display:inline。 IE6 和 IE7 只需使用 *display:inline; *zoom:1;。
给它一个很好的测试，看看你的想法。
CSS Table Browser Compatibility Chart
Inline-block Browser Compatibility Chart
CSS
.table-holder {
display:table;
width:100%;
}
.table-row {
display:table-row;
}
.table-cell-right {
display:table-cell;
width:90px; /* small px used for example */
background-color:#ccffcc;
padding:.5em;
vertical-align:top;
}
.table-cell-left {
display:table-cell;
background-color:#ccffff;
text-align:center;
}
.center-nested {
width:85%; /*set to desired width */
display:inline-block;
padding:.5em;
text-align:left;
vertical-align:top;
background-color:#ffffcc;
}
/* ------------ center using padding -------------*/
.padded-table-cell-left {
display:table-cell;
background-color:#ccffff;
padding:0em 2em 0em 2em;
}
.padded-center-nested {
padding:.5em;
background-color:#ffffcc;
}
HTML
<p>Table using inline-block to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="table-cell-left">
<div class="center-nested">
This is a CSS table. The blue parent cell has text-align:center. The yellow nested div is display:block, which responds to the text-align:center on the parent: therefore, the yellow div is truely centered. Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>
<p>Table using padding to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="padded-table-cell-left">
<div class="padded-center-nested">
The yellow centered cell appears centered because the parent has equal left and right padding. - Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>
【讨论】：
如果我的理解是正确的，那么您正在尝试实现这样的目标：
<div class="container"><div class="first"></div><div class="second"></div></div>
CSS：
.first {
width: 100px;
height: 50px;
background-color: black;
}
.second {
position: absolute;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
}
.container {
width: 500px;
height: 100px;
background-color: green;
position: relative;
}
这是fiddle。如果我误解了并且您不想将第二个 div 拉伸到剩余的全部宽度，而只想将其居中，那么只需像这样修改 css：
.second {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
【讨论】：
一种可能的解决方案是将右侧的 div 嵌套在另一个带有 margin-left: 900px 的 div 中，然后在内部 div 上使用 margin: 0 auto 使其居中。
查看此示例中的技术：http://jsfiddle.net/r15fL0de/
注意：为了小提琴，我用300px而不是900px，但原理是一样的
【讨论】：
根据定义，浮动元素不会占用其容器内的空间，因此不可能将“其他内容”居中。
一般来说，不要将float 用于实际上不是浮动的内容，例如文章中的图片。对于布局，您通常应该更喜欢绝对定位或其他更灵活的结构。
例如，您可以绝对定位侧边栏，并为容器提供与侧边栏大小相等的边距，which would solve your problem instantly。
如果这不可行，例如因为元素都是灵活高度，您可以使用float:left、display:inline-block 或display:table-cell 将 2 个容器彼此相邻放置。然后在右容器内居中是微不足道的。
【讨论】：
你在 div 上有填充吗？
如果有，您可以将box-sizing 设置为border-box 并将第一个框向左浮动，而将第二个框保持原样。
你想实现这样的目标吗？
【讨论】：