将 div 附加到另一个 div 的右侧

Question

我有一个 div，它就像一个容器，里面有 2 个图像。一张图片在 div 的左侧，另一张在右侧。 我的容器是Bootstrap的容器

它们都被一个div包裹，而div's position就是fixed。

我的问题是我找不到要附加到容器右侧的正确图像。我尝试了 float 和 right 属性，但它们没有给出预期的结果。

如何将 div 附加到另一个 div 的右侧？

Answer 1

https://jsfiddle.net/mqwbcLn8/5/ 修复了 Nem 的代码。

HTML：

<div class="container">
    <div class="left-element">
        left
    </div>
    <div class="right-element">
        right
    </div>
</div>

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

你浮动两个元素，所以它们总是粘在一起。然后，您只需移动包装 div，它们就会保持在一起。我添加了粉红色背景，这样您就可以看到该解决方案不会丢失任何空间。

包装器仅用于位置并将其他两个元素保持在原位。像这样，您可以随意放置这两个元素，同时它们始终像这样保持在一起。

Answer 2

如果我正确理解您的问题，您有一个固定位置的大容器。容器内部的左 div 粘在内部左侧，容器内部的右 div 粘在内部右侧？

您可以将显示设置为 inline-block 这将强制它们并排，然后使用左/右将它们定位在容器中：

HTML：

<div class="container">
    <div class="left-element">
        left
    </div>
    <div class="right-element">
        right
    </div>
</div>

你的 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/