javascript 将 div 元素定位到另一个 div 元素的左侧和右侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6033206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position div elements to stick to the left & right of another div element?
提问by Gofa Kursalv
How can I style two div elements so that they stick to the left & right of another div element like in the following example?
如何设置两个 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. | |
| | | | | |
| | | | | |
| +--------+-----------------------+--------+ |
| |
| |
+------------------------------------------------------------+
回答by Jonathan Miller
Try this: http://jsfiddle.net/jHs2b/
试试这个：http: //jsfiddle.net/jHs2b/
回答by Naftali aka Neal
#left{
float: left;
}
#right{
float: right;
}
Here is an example: http://jsfiddle.net/maniator/rmz66/
这是一个例子：http: //jsfiddle.net/maniator/rmz66/
回答by Krimo
#container {position:relative;}
#left, #right {position:absolute;}
#right {right:0;}
#box {width:XXX;margin:0 auto;}
Specify your box width and also a height if you don't have any content yet.
如果您还没有任何内容，请指定您的框宽度和高度。
回答by Vilius 1989
#container{
display: block;
width: 1000px;
}
#left, #box, #right{
display: inline-block;
vertical-align: top;
}
#left, #right{
width: 200px;
}
#box{
width: 500px;
}
Get rid of margins, paddings and etc, so you can maximise #box, and #left, #right
去掉边距、填充等，这样你就可以最大化#box, 和#left,#right
回答by lipelip
It would be easier to put a div(let's call it "parent") around your three div. You center #parentinside your #containerthen you put #box, #leftand #rightin float: left. This should work.
div在你的三个周围放一个（让我们称之为“父母”）会更容易div。你中心#parent里面你#container然后你把#box，#left并#right在float: left。这应该有效。
A tableor a list will work too.
Atable或列表也将起作用。
回答by Shilaghae
<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>
