位置div元素要堅持另一個div元素的左側和右側？

Question

如何設置兩個div元素的樣式，以便它們像下面的示例一樣粘在另一個div元素的右側&？

<div id="container"> 
    <div id="left">Left.</div> 
    <div id="box">This is a box.</div> 
    <div id="right">Right.</div> 
</div> 

---

+#container--------------------------------------------------+ 
|               | 
|               | 
|  +#left---+#box-------------------+#right--+   | 
|  |  |      |  |   | 
|  |  |      |  |   | 
|  |  |      |  |   | 
|  | Left. |  This is a box. | Right. |   | 
|  |  |      |  |   | 
|  |  |      |  |   |                
|  +--------+-----------------------+--------+   | 
|               | 
|               | 
+------------------------------------------------------------+ 

Answer 1

#left{ 
    float: left; 
} 

#right{ 
    float: right; 
} 

下面是一個例子：http://jsfiddle.net/maniator/rmz66/

Answer 2

#container {position:relative;} 
#left, #right {position:absolute;} 
#right {right:0;} 
#box {width:XXX;margin:0 auto;} 

指定您的框的寬度也高度，如果你沒有任何內容呢。

Answer 3

#container{ 
    display: block; 
    width: 1000px; 
} 
#left, #box, #right{ 
    display: inline-block; 
    vertical-align: top; 
} 
#left, #right{ 
    width: 200px; 
} 
#box{ 
    width: 500px; 
} 

擺脫利潤率，填充和等，這樣可以最大限度地#box和#left，#right

Answer 4

它會更容易把一個div（姑且稱之爲「父」），你的三個div各地。您將#parent居中在您的#container之內，然後您將#box,#left和#right置於float: left之內。這應該工作。

A table或者列表也可以。

Answer 5

試試這個：http://jsfiddle.net/jHs2b/

Answer 6

<div id="container" style="padding: 50px;border:1px solid gray"> 
    <div id="left" style="padding: 10px;float:left;border:1px solid green">Left.</div> 
    <div id="box" style="padding: 10px;float:left;border: 1px solid red">This is a box.</div> 
    <div id="right" style="padding: 10px;float:left;border:1px solid blue;">Right.</div> 
</div>