将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. |         |
|        |        |                       |        |         |
|        |        |                       |        |         |                                                            
|        +--------+-----------------------+--------+         |
|                                                            |
|                                                            |
+------------------------------------------------------------+

- Gofa Kursalv

---

我觉得在这里使用table比使用div更合适。 - niksvp

Answer 1

试试这个：http://jsfiddle.net/jHs2b/

- Jonathan Miller

Answer 2

#left{
    float: left;
}

#right{
   float: right;
}

这是一个例子：http://jsfiddle.net/maniator/rmz66/

- Naftali

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

- Vilius Sutkus '89

Answer 4

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

如果您还没有内容，请指定您的框宽度和高度。

- Krimo

Answer 5

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

- Shilaghae

Answer 6

将一个名为“parent”的div放置在您的三个div周围会更容易。 您可以居中#parent在您的#container中，然后将#box、#left和#right放在float: left中。 这应该有效。

table或列表也可以使用。

- lipelip