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

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

Answer 2

#left{
    float: left;
}

#right{
   float: right;
}

以下是一个示例：http://jsfiddle.net/maniator/rmz66/

Answer 3

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

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

Answer 4

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

将div（让我们称之为“父”）放在你的三个div周围会更容易。您将#parent置于#container内，然后将#box，#left和#right放入float: left。这应该工作。

table或列表也可以使用。

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>

将div元素定位在左侧和左侧。另一个div元素的权利？

6 个答案: