Question

是的，所以我将网站放在100％宽度的包装中。里面有两个div。一个是浮动的，固定宽度为900px，并且......我试图让第二个在第一个div和屏幕右边的剩余空间中居中。

我尝试过浮动左/右相对/绝对定位，自动边距等变化，但没有一个工作。

有人可以帮忙吗？

Answer 1

根据定义，浮动元素不会占用容器内的空间，因此无法将其他内容置于中心位置。

一般情况下，请勿将float用于实际不浮动的内容，例如文章中的图片。对于布局，您通常应该选择绝对定位或其他更灵活的构造。

例如，您可以绝对放置侧边栏，并为容器提供与边栏which would solve your problem instantly的大小相等的边距。

如果这是不可能的，例如因为元素都是灵活的高度，您可以使用float:left，display:inline-block或display:table-cell将2个容器放在彼此旁边。因此，在右侧容器内居中是微不足道的。

Answer 2

如果我的理解是正确的，那么你正在努力实现这样的目标：

<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;
}

Answer 3

以下是在div上使用CSS表设置的示例。调整大小时以及添加内容时，它会保持良好状态。另一个好处是左列和右列都将保持相同的高度，并将环绕内容。如果您希望左右列看起来具有不同的高度，只需插入并设置嵌套的div。

在第一个示例中，右侧div具有text-align：center。嵌套的div是display：inline-block，它识别父对象的text-align：center。因此，嵌套的div真正居中。内联块也会环绕其内容的宽度，如果您的居中元素具有设置宽度或小的可变宽度，这将非常有用。如果您的内容像示例一样填充其父级，则只需设置最大宽度。

在第二个例子中，右边的div在左边和右边有相同的填充，以“居中”它的内容。

注意：如果你支持IE6和IE7 - CSS表设置和inline-block具有出色的浏览器兼容性，IE6和IE7除外。对于css表设置，有一个polyfill。 IE6和IE7也无法识别内联块，但它们确实识别显示：内联。只需对IE6和IE7使用*display:inline; *zoom:1;。

给它一个好的测试，看看你的想法。

JSFiddle Example

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>

Answer 4

你在div上有填充吗？如果你有，你可以将box-sizing设置为border-box并将第一个框浮动到左边，然后保留第二个框。

你想要达到这样的目标吗？

http://jsbin.com/zenedabiyoyu/1/edit

Answer 5

一种可能的解决方案是将右侧div与margin-left: 900px嵌套在另一个div中，然后在内部div上使用margin: 0 auto将其居中。

查看此示例中的技巧：http://jsfiddle.net/r15fL0de/

注意：为了小提琴我使用300px而不是900px，但原理是相同的

将div放在浮动div留下的剩余空间中？

5 个答案: