Html 将 div 附加到另一个 div 的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31830089/
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
Attach div to the right of another div
提问by Tal
I have a div which is like a container and inside of it there are 2 images. One image is on the left side of the div and the other is on the right. My container is Bootstrap's container
我有一个 div，它就像一个容器，里面有 2 个图像。一张图片在 div 的左侧，另一张在右侧。我的容器是 Bootstrap 的容器
Both of them are wrapped with a div, and that div's positionis fixed.
两者都用一个 div 包裹，也div's position就是fixed.
My problem is that I can't locate the right image to be attached to the right side of the conatiner. I tried the floatand the rightproperties but they not give the expected result.
我的问题是我找不到要附加到容器右侧的正确图像。我尝试了float和right属性，但它们没有给出预期的结果。
How can I attach div to the right of another div?
如何将 div 附加到另一个 div 的右侧？
回答by SophieXLove64
https://jsfiddle.net/mqwbcLn8/5/fixed Nem's code.
https://jsfiddle.net/mqwbcLn8/5/修复了 Nem 的代码。
HTML:
HTML：
<div class="container">
<div class="left-element">
left
</div>
<div class="right-element">
right
</div>
</div>
CSS:
CSS：
.container {
position: fixed;
left: 350px;
padding: 0;
margin: 0;
background-color: #ff00ff;
}
.left-element {
background: green;
display: inline-block;
float: left;
}
.right-element {
background: red;
display: inline-block;
float: left;
}
You float both elements, so they are always sticked together. Then you just move the wrapping div and they both keep together. I added pink background so you can see that you don't lose any space with that solution.
你浮动两个元素，所以它们总是粘在一起。然后你只需移动包装 div 并且它们都保持在一起。我添加了粉红色背景，因此您可以看到该解决方案不会丢失任何空间。
The wrapper is just for the position and to keep the other two elements in place. Like this you can position those two elements as you wish, while they always stay together like this.
包装器仅用于位置并保持其他两个元素到位。像这样，您可以随意放置这两个元素，而它们始终像这样保持在一起。
回答by Simon
If I'm understanding your problem correctly, you have a large container with fixed position. A left div on the inside of the container that sticks to the inside left, and a right div inside the container that sticks to the inside right?
如果我正确理解你的问题，你有一个固定位置的大容器。容器内部的左侧 div 粘在左侧内侧，而容器内的右侧 div 粘在右侧内侧？
You can just set the display to inline-block which will force them side by side, and then use left/right to position them within the container:
您可以将显示设置为 inline-block 这将迫使它们并排，然后使用左/右将它们放置在容器中：
HTML:
HTML：
<div class="container">
<div class="left-element">
left
</div>
<div class="right-element">
right
</div>
</div>
Your css would just look like this:
你的 css 看起来像这样：
.container {
width:500px;
position: fixed;
}
.left-element {
background: green;
display: inline-block;
position: absolute;
left: 0;
}
.right-element {
background: red;
display: inline-block;
position: absolute;
right: 0;
}
jsfiddle: https://jsfiddle.net/mqwbcLn8/3/
jsfiddle：https://jsfiddle.net/mqwbcLn8/3/
