将div附加到另一个div的右侧 [英] Attach div to the right of another div

问题描述

我有一个像容器一样的div，它的内部有2张图片.一幅图像位于div的左侧，另一幅图像位于div的右侧.我的容器是Bootstrap的容器

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包裹，并且 div的位置是固定的.

Both of them are wrapped with a div, and that div's position is fixed.

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

My problem is that I can't locate the right image to be attached to the right side of the conatiner. I tried the float and the right properties but they not give the expected result.

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

How can I attach div to the right of another div?

推荐答案

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

https://jsfiddle.net/mqwbcLn8/5/ fixed Nem's code.

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，它们就会保持在一起.我添加了粉红色的背景，这样您就可以看到使用该解决方案不会损失任何空间.

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.

包装器仅用于放置位置，并将其他两个元素固定在适当的位置.这样，您可以根据需要放置这两个元素，而它们始终像这样保持在一起.

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.

这篇关于将div附加到另一个div的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！