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

有几种不同的方法让它“不干涉”其他元素......但取决于你的情况。

圈子代码：

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

对齐可以是浮点数，或者：

display: inline-block;

并定位元素和父容器以将其放置在页面上。

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

我想连续做3个圆圈而不干扰任何其他事情

1 个答案: