将div附加到另一个div

时间:2015-08-05 10:36:28

标签: html css css-position

我有一个div就像一个容器,里面有2个图像。一个图像位于div的左侧,另一个位于右侧。 我的容器是Bootstrap的容器

它们都用div包裹,而div's positionfixed

我的问题是我无法找到正确的图像附加到conatiner的右侧。我尝试了floatright属性,但没有给出预期的结果。

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

2 个答案:

答案 0 :(得分:2)

如果我正确理解你的问题,你就有一个固定位置的大容器。容器内侧的左侧div固定在左侧内侧,右侧内侧的div位于右侧内侧?

您可以将显示设置为内联块,这将强制它们并排,然后使用左/右将它们放置在容器中:

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/

答案 1 :(得分:2)

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,它们就会保持在一起。我添加了粉红色的背景,这样你就可以看到你没有丢失任何空间。

包装器仅用于位置并保持其他两个元素就位。像这样你可以按照自己的意愿定位这两个元素,而它们总是像这样保持在一起。