如何使用CSS排列具有半徑的div結構

Question

我正嘗試創建此示例圖像中顯示的HTML頁面。

Sample image http://i57.tinypic.com/14udpo4.png

我希望把其他組件上這種黑色和栗色圈的頂部。爲此，我使用div和span的標籤結構。並使用span背景圖像將此圖像用作背景。

我的問題是什麼將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 - DEMO

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.