居中元素与容器内左对齐元素内联答案

【问题标题】：Center element with left aligned element inline within container居中元素与容器内左对齐元素内联
【发布时间】：2012-11-10 08:12:58
【问题描述】：

我在容器<div> 中有两个<div> 元素，我需要将其中一个元素对齐容器左侧，另一个对齐容器中心，同时保持它们内联。

如果我只是 float 第一个离开，第二个就会偏离中心向右推。

目前我最好的解决方案是将容器position: relative 与text-align: center 对齐，并将第一个元素向左对齐position: absolute。

也许有另一种更好的方法可以做到这一点，而无需使用绝对位置？

【问题讨论】：

【解决方案1】：

这是一个非常长的镜头，但我发现在左侧浮动元素上应用一个很大的负边距右将补偿中心偏移...

尝试给浮动的 div 一个 margin-right: -1000px;

【讨论】：

不完全确定这在所有浏览器中的表现如何，它适用于我在最新的 chrome 上。
虽然它看起来像一个粗略的解决方案，我不知道如何以及为什么，它似乎对我来说在 chrome 和 safari 中工作。谢谢！我想知道 IE 是如何看待它的..
你能指望浏览器的无法解释的行为吗？ Chrome 和 Safari 都基于 WebKit - 这就是为什么两者的行为方式相同。检查 Opera 和 Firefox。如果它在那里工作 - 不要费心检查 IE。 IE 很可能不会接受。
大声笑，确切地说，这是非常粗略的，我对为什么这实际上有效的理解非常有限。我通常不会发布这种松散的解决方案。

【解决方案2】：

一个div中有两个div有限制吗？你可以做 4 个divs:

<div id="one">
    <div id="first"></div>
    <div id="two">
        <div id="second"></div>
    </div>
</div>

然后将float: left 应用于#first 和#two，然后将margin: auto 应用于#second

【讨论】：