浮動左邊與中心元素相結合

Question

如何在不知道第一個元素寬度的情況下將第二個元素居中放在div中。

我想讓「foo」浮動到左邊，「bar」以原始div爲中心。我能做到這一點，如果我知道「富」的寬度：

<div> 
    <span style="float:left;">foo</span> 
    <span style="margin-left:-10px;">bar</span> 
</div> 

是否有另一種方式做到這一點，沒有利潤率左設置爲靜態寬度？

Answer 1

Center of the parent div?

<div> 
    <span id="f"> foo foo foo foo foo foo foo foo </span> 
    <span id="c">bar</span> 
</div> 

CSS：

#f{ 
    float:left; 
} 
#c{ 
    display:block; 
    margin: 0 auto; 
    width:100px; 
} 

Answer 2

嘗試將第二個元素上的margin-left設置爲50％。

下面是一個例子： http://jsfiddle.net/6fMve/

Answer 3

我，爲什麼你會想這有點混亂，但在這裏：http://jsfiddle.net/Wexcode/jL87v/

<div> 
    <span class="foo">foo</span> 
    <span class="bar">bar</span> 
</div> 

CSS：

.foo { float: left; } 
.bar { 
    text-align: center; 
    margin: 0 auto; 
    display: block; } 

Answer 4

你可以這樣寫：

CSS

.parent{ 
    text-align:center; 
} 
.child1,.child2{ 
    text-align:left; 
} 
.child1{ 
    float:left; 
} 
.child2{ 
    vertical-align:top; 
    display:inline-block; 
    *display:inline;/* For IE7 */ 
    *zoom:1;/* For IE7 */ 
    border:1px solid red; 
} 

HTML

<div class="parent"> 
    <span class="child1">foo</span> 
    <span class="child2">bar</span> 
</div> 

檢查這個http://jsfiddle.net/6fMve/1/