如何使用 CSS 排列半径为 div 的结构

Question

我正在尝试创建此示例图片中显示的 HTML 页面。

我想在这个黑色和栗色圆圈上放置其他组件。为此，我使用 div 和跨度的标签结构。并使用 span background-image 将此图像应用为背景。

我的问题是 div 的结构和跨度如何在包含栗色圆圈作为背景的 div/span 标签的半径上排列黑色圆圈。

到现在我已经放置了中心圆。周围不知道怎么排其他圈

div.table-text {
  position: fixed;
  top: 20%;
  left: 20%
}
span.table-text {
  position: inherit;
  display: block;
  width: 60%;
  height: 60%;
  background-image: url(../images/table-text.png);
  background-position: bottom;
  background-repeat: no-repeat;
}

<div class="table-text">
  <span class="table-text">
    </span>
</div>

Answer 1

我不确定我是否理解问题，但我会尽力回答。

你不能使用像 cos() 这样的东西来排列 HTML 上的元素，你将不得不使用负数 margin-top: 或 position: absolute;

我的建议：对左右两边的黑点使用负边距。

编辑：我完成了你的工作，现在付钱给我！ @:

.circle {
    display: inline-block;
    border-radius: 200px;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: black;    
}
#bigCircle {
    border-radius: 200px;    
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background-color: brown;
}
#bottom {
    margin: 50px calc(50% - 50px);
}
#left {
    margin: -50px calc(25% - 50px);   
}
#right {
    margin: -50px calc(75% - 50px);
}

<div id="bigCircle"></div>
<div class="circle" id="left"></div>
<div class="circle" id="bottom"></div>
<div class="circle" id="right"></div>

JSFiddle - 演示

Answer 2

我想你想要 here 对于响应式，您可以使用百分比或最大宽度的值。

<div class="maroon">
<div class="m-child m-child1"></div>
<div class="m-child m-child2"></div>
<div class="m-child m-child3"></div>
<div class="m-child m-child4"></div>
</div>

.maroon{
max-width: 300px;
max-height:300px;
background:maroon;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.m-child, .maroon{
position: absolute;
border-radius:100%;
}
.m-child{
background: #000;
width:100px;
height:100px;
}
.m-child1{
left: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child2{
right: -50px;
top:0;
bottom: 0;
margin: auto;
}
.m-child3{
top: -50px;
left: 0;
right:0;
margin: auto;
}
.m-child4{
bottom: -50px;    
left: 0;
right:0;
margin: auto;
}

Answer 3

在不知道您文档结构的其余部分的情况下，我使用绝对定位为您拼凑了这个概念证明，希望它能为您指明正确的方向。

如果您需要澄清任何内容或任何不符合您需求的内容，请告诉我，我会尝试相应地进行更新。

*{
    box-sizing:border-box;
    color:#fff;
    font-family:sans-serif;
}
.top{
    background:red;
    border-radius:50%;
    margin:-10% auto 0;
    padding:0 0 75%;
    position:relative;
    width:75%;
}
div>div{
    background:green;
    border-radius:50%;
    overflow:hidden;
    padding:0 0 20%;
    position:absolute;
    width:20%;
}
div.one{
    left:-10%;
    top:80%;
}
div.two{
    left:40%;
    top:103%;
}
div.three{
    right:-10%;
    top:80%;
}
p{
    text-align:center;
    position:absolute;
    margin:0;
    width:100%;
}
.top>p{
    top:15%
}
.top>div>p{
    top:5%;
}

<div class="top">
    <p>top</p>
    <div class="one">
        <p>one</p>
    </div>
    <div class="two">
        <p>two</p>
    </div>
    <div class="three">
        <p>three</p>
    </div>
</div>

Answer 4

我认为您需要如下内容：您可以根据需要进行更改。

.middle_circle {
    background: none repeat scroll 0 0 red;
    border-radius: 100%;
    height: 200px;
    left: 220px;
    position: absolute;
    top: 60px;
    width: 200px;
}
.circle{
    position:relative;
    width:5%;padding-bottom:50%;
    margin-left:47.5%;
}
.circle div {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    -webkit-transform : rotate(24deg);
    -ms-transform : rotate(24deg);
    transform : rotate(24deg);
}
.circle:before, .circle div:before {
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%; padding-bottom:100%;
    border-radius: 100%; background:black;
}

<div class="circle">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
    </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
<div class="middle_circle"></div>

勾选Fiddle.

如何使用 CSS 排列半径为 div 的结构

How to arrange div structure with radius using CSS

html

css

css-shapes