私は何かを妨げることなく、一列に3つの塗りつぶし円をしたい

Question

私はこれを助けたいと思います。私は非常に多くの異なる方法を試みたが、誰も働かない。私はHTMLとCSSだけでこれを望みます。ここで

.circles { 
 
     background-color: white; 
 
     height: 70px; 
 
     width: 70px; 
 
     border-radius: 40px; 
 
     position:relative; 
 
     margin:10px auto; 
 
     display:inline-block; 
 
} 
 

 
.row { 
 
     
 
     height: 100px; 
 
     width: 700px; 
 
     margin: 10px; 
 
     text-align:center; 
 
     position:relative; 
 
}

<div class="row"> 
 
      <div class="circles"></div> 
 
      <div class="circles"></div> 
 
      <div class="circles"></div> 
 
     </div>

Answer 1

jsbin経由例である：それは他の要素と「干渉しない」ために取得するカップルの方法があり http://jsbin.com/tezocucufi/edit?html,css,output

...しかし、何に依存しますあなたの状況。

サークルコード：

display: inline-block; 

素子と親コンテナの両方がページ上に位置決めするposition'ing：

border-radius: 50%; 
width: 100px; 
height: 100px; 

アライメントはフロート、又はであり得ます。

参考：https://davidwalsh.name/demo/css-circles.php