Плавающие 3 divs внутри контейнера div

Question

Я пытаюсь поплавать 3 divs в контейнере div. Я думал, что это будет просто, но мне трудно держать их равномерно разбросанными. Поскольку я хочу, чтобы сайт был несколько отзывчивым, поэтому я не могу иметь интервал, указанный в px.

CSS:

#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;} 

.circle{width:200px;height:200px;border-radius:100px; 
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff; 
line-height:150px;text-align:center;background: rgba(0,0,0,0.8); 
margin:auto; display:inline-block; vertical-align:middle; 
} 

Заранее спасибо

Answer 1

держать их внутри 3 Div элементов с шириной 33% каждого, и использовать margin: auto; на круглых дивы, таким образом, они будут равны.

Demo

<div class="wrap_me"> 
    <div></div> 
</div> 
<div class="wrap_me"> 
    <div></div> 
</div> 
<div class="wrap_me"> 
    <div></div> 
</div> 

CSS

.wrap_me { 
    width: 33%; 
    border: 1px solid #f00; 
    float: left; 
} 

.wrap_me div { 
    width: 150px; 
    height: 150px; 
    border-radius: 100px; 
    border: 1px solid #ddd; 
    margin: auto; 
} 

Вы также можете держать это внутри одного контейнера с min-width свойством так, что элементы не завернуть упаковывают недостаточной ширины

Answer 2

Что Г-н Алиен сказал, что это не так, но

Я с трудом сохраняя их равномерно разведены

Если у вас есть три дивы вы хотите распространять даже по всей ширине контейнера, вы можете плавать самый левый ДИВ слева , самый правый ДИВ вправо и среднего DIV получит float:none и margin: auto, например, так:

.container { 
    width: 300px; 
    height: 100px; 
} 

.container div { 
    width: 25%; 
    height: 100%; 
    background: blue; 
    border-radius: 100%; 
} 

.inner-left { 
    float: left; 
} 

.inner-middle { 
    float: none; 
    margin: auto; 
} 

.inner-right{ 
    float: right; 
    position: relative; 
    bottom: 100%; 
} 

См jsfiddle.

EDIT: обновленной скрипка - не спасли ...