Прикрепить div справа от другого div

Question

У меня есть div, который похож на контейнер и внутри него есть 2 изображения. Одно изображение находится в левой части div, а другое - справа. Мой контейнер - контейнер Bootstrap

Оба они завернуты в div, и что div's position - fixed.

Моя проблема заключается в том, что я не могу найти правильное изображение для прикрепления к правой стороне conatiner. Я попробовал float и right, но они не дают ожидаемого результата.

Как я могу прикреплять div справа от другого div?

Answer 1

Если я правильно понимаю вашу проблему, у вас есть большой контейнер с фиксированным положением. Левый 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/

Answer 2

https://jsfiddle.net/mqwbcLn8/5/ Исправлен код Нема.

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, и они оба держатся вместе. Я добавил розовый фон, чтобы вы могли видеть, что вы не теряете пространства с этим решением.

Обертка предназначена только для позиции и для сохранения двух других элементов. Таким образом вы можете позиционировать эти два элемента по своему усмотрению, в то время как они всегда остаются вместе.