Как поставить divs бок о бок?

Question

У меня возникли проблемы с размещением двух divs side и map, чтобы быть рядом друг с другом. Я в настоящее время:

CSS

.col-md-8 { float: right; clear: right;} 
.col-md-4 { float: left; clear: left; } 

HTML

<div class='container-fluid'> 
    <div class='row'> 
     <div style="width: 700px;" class='col-md-4' id="side"> 
     </div> 

     <div class='col-md-8' id="try"> 
      <div id="map" style="width: 1000px; height: 800px"> 
      </div> 
     </div> 
    </div> 
</div> 

В принципе, я хотел бы дивы #side и #map быть рядом друг с другом ... так что я бы не поставил #side и #try бок о бок? Итак, я пробовал это с помощью CSS, с float: right и float: left? Я просто не могу понять, что случилось. Любая помощь будет принята с благодарностью, спасибо!

Answer 1

Вы смешиваете несколько различных атрибутов стиля.

Вы определили CSS classes, но попытаетесь использовать их для таргетинга Element Id attribute.

.try { float: right;} 
.side { float: left; } 

Вы можете изменить свой CSS для целевого идентификатора элемента.

#try { float: right;} 
#side { float: left; } 

Вы также используют при помощи начальной загрузки классов и специально выбрали один для отзывчивым макета (с использованием container-fluid класса). Определяя div как row и предоставляя элементы в этих классах столбцов div, они будут плавать соответствующим образом на основе всего 12 столбцов.

Наконец, вы противоречите классам бутстрапа, а затем задаете явные ширины в своих div. У вас может быть 1 или другой. Вы не должны сделать оба.

Пока вы не решите использовать бутстрап ИЛИ используя жесткие кодированные ширины, он не будет правильно оформлен.

Answer 2

Первая проблема заключается в том, что вы сражаетесь с сеткой. Два div будут автоматически отображать встроенный блок, если вы не превысите ширину контейнера (который вы в этом случае - я вижу, что вы используете загрузку). Если вы превысите эту ширину, они будут складываться вместо этого.

Это говорит - если вы берете преодолев сетку из уравнения (не записывайте фиксированную ширину на отзывчивых колоннах) - поместить DIVS стороны с использованием боковым:

HTML

<div class="container"> 
    <div class = "one"></div> 
    <div class = "two"></div> 
</div> 

CSS

.container div { 
    display: inline-block; 
} 

Answer 3

В вашем примере вы положили #map внутри #try -div, поэтому их нельзя плавать рядом друг с другом.

Ваш код может выглядеть следующим образом:

#side, 
 
#map { 
 
    float: left; 
 
    background: green; 
 
    border: 10px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div> 
 

 
    <div> 
 

 
     <div id="side"> 
 
     </div> 
 

 
     <div id="try"> 
 
      <div id="map"> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div>

Я удалил стиль-атрибут на #Map и добавлен фон, границы, ширина и высота только, чтобы показать вам, что это работает ,

Для использования ботстрап-классов посмотрите на whipdancers ответ!