如何使用css / bootstrap将圆圈放在圆圈中？

时间：2018-02-20 18:44:41

标签： html css css-transforms

我想知道如何在一个圆圈内定位圆圈/图像。我已经尝试将它们放在一个容器中并围绕一个圆圈旋转它们，但我无法弄清楚如何使它像下图所示：

https://i.stack.imgur.com/cIdkg.png] 

.deg1 {
  transform: rotate(270deg) translate(6em) rotate(-270deg);
  top: 50px;
  position: relative;
}


/* 1 */

.deg2 {
  transform: translate(6em);
}


/* 2 */

.deg3 {
  transform: rotate(45deg) translate(6em) rotate(-45deg);
}


/* 3 */

.deg4 {
  transform: rotate(135deg) translate(6em) rotate(-135deg);
}


/* 4 */

.deg5 {
  transform: translate(-6em);
}


/* 5 */

.deg6 {
  transform: rotate(225deg) translate(6em) rotate(-225deg);
}


/* 6 */

.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}
<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

首先，我尝试在bootstrap的文档中搜索可以提供帮助的内容，所以我只是这样做而无法理解。

4 个答案:

答案 0 :(得分：1)

我使用Javascript / jquery来设置每个外圈的位置。

Jquery从ThiefMaster♦无耻地偷走了他们的回答Q & A 

var radius = 50; // adjust to move out items in and out 
var fields = $('.container div'),
  container = $('.container'),
  width = container.width(),
  height = container.height();
var angle = 0,
  step = (2 * Math.PI) / fields.length;
fields.each(function() {
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (window.console) {
    console.log($(this).text(), x, y);
  }
  $(this).css({
    left: x + 'px',
    top: y + 'px'
  });
  angle += step;
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

body {
  display: flex;
  height: 100vh;
  overflow:hidden;
}

.container {
  width: 50px;
  height: 50px;
  margin: auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid grey;
  background: #f00;
  animation: spin 3s infinite linear
}

.container div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000;
  border-radius: 50%;
}

.container div:first-child {
  background: blue;
}

@keyframes spin {
  100% {
    transform: rotate(1turn)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

答案 1 :(得分：1)

如果没有translate和transform，您甚至可以使用top，left，'底部'和'右'来定位。

  

请确保使用px，因为如果您使用%值，它将会中断。

您需要根据自己的形象进行一些修改。

// .deg1 {
//   transform: rotate(270deg) translate(6em) rotate(-270deg);
// } /* 1 */
// .deg2 {
//   transform: translate(6em);
// } /* 2 */
// .deg3 {
//   transform: rotate(45deg) translate(6em) rotate(-45deg);
// } /* 3 */
// .deg4 {
//   transform: rotate(135deg) translate(6em) rotate(-135deg);
// } /* 4 */
// .deg5 {
//   transform: translate(-6em);
// } /* 5 */
// .deg6 {
//   transform: rotate(225deg) translate(6em) rotate(-225deg);
// } /* 6 */
.circle-container {
  position: relative;
  width: 24em;
  height: 24em;
  padding: 2.8em;
  border-radius: 50%;
  margin: 1.75em auto 0;
}

.circle-container a {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4em;
  height: 4em;
  margin: -2em;
}

img {
  border-radius: 400px;
  width: 100px;
}

.center img {}

.deg1 img {
  position: relative;
  top: 100px;
}

.deg2 img {
  position: relative;
  bottom: 100px;
}

.deg3 img {
  position: relative;
  top: 50px;
  left: 85px;
}

.deg4 img {
  position: relative;
  top: 50px;
  right: 85px;
}

.deg5 img {
  position: relative;
  bottom: 50px;
  right: 85px;
}

.deg6 img {
  position: relative;
  bottom: 50px;
  left: 85px;
}
<div class='circle-container'>
  <a href='#' class='center'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg2'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg3'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg4'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg5'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg6'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
  <a href='#' class='deg1'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSp33aj-dlpojFqHXLPAQlQ9FH-su46mPBwEvFgi97RzuKoC0f1" %></a>
</div>

答案 2 :(得分：0)

您可以使用CSS来定位元素。例如，这是一个使用CSS网格的示例。

我已经将网格声明为6行乘6列，以便将角落放置为空。

＆＃13;
＆＃13; 
.circle-container {
  width: 24em; height: 24em;
  border-radius: 50%;
  border:2px solid red;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}
.circle-container a {
    display: block;
    border:2px solid grey;
    background:white;
    border-radius:50%;
    text-align:center;
}

.deg1 {grid-column:3 / span 2; grid-row: 1 /span 2} /* 1 */
.deg2 {grid-column:1 / span 2; grid-row: 2 /span 2} /* 2 */
.deg3 {grid-column:5 / span 2; grid-row: 2 /span 2} /* 3 */
.deg4 {grid-column:3 / span 2; grid-row: 3 /span 2} /* 4 */
.deg5 {grid-column:1 / span 2; grid-row: 4 /span 2} /* 5 */
.deg6 {grid-column:5 / span 2; grid-row: 4 /span 2} /* 6 */
.deg7 {grid-column:3 / span 2; grid-row: 5 /span 2} /* 7 */


/*bring the lateral circles closer to the center*/
.deg2, .deg5{margin:0 -1em 0 1em;}
.deg3, .deg6{margin: 0 1em 0 -1em}

body{
  background:steelblue;
}
＆＃13; 
<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>
＆＃13;
＆＃13;
＆＃13;

如果你不想使用CSS网格（也许是因为IE11），你也可以使用你喜欢的任何类似网格的技术，可能是浮点数，内联块，甚至是flexbox，将元素放在三行中并推倒侧面的那些。

这里有display：inline-block，通常会返回

123
456
7

和一些变换来补偿

＆＃13;
＆＃13; 
.circle-container {
  width: 240px; height: 240px;
  border:2px solid red;
  font-size:0;/*typical inline-block whitespace hack*/
  border-radius:50%;
}
.circle-container a {
    display:inline-block;
    width:calc(100% / 3);
    height:calc(100% / 3);
    border:2px solid grey;
    background:white;
    text-align:center;
    font-size:1rem;
    border-radius:50%;
}
.deg1, .deg3, .deg4, .deg6{
  transform:translateY(50%);
}

.deg7{
  transform:translateX(100%)
}

body{
  background:steelblue;
}
*{box-sizing:border-box; margin:0; padding:0;}
＆＃13; 
<div class='circle-container'>
    <a href='#' class='deg1'>1</a>
    <a href='#' class='deg2'>2</a>
    <a href='#' class='deg3'>3</a>
    <a href='#' class='deg4'>4</a>
    <a href='#' class='deg5'>5</a>
    <a href='#' class='deg6'>6</a>
    <a href='#' class='deg7'>7</a>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

你可以尝试调整一些边距和容器的宽度，然后不需要复制变换：

＆＃13;
＆＃13; 
.circle-container {
  position: relative;
  width: 12em;
  height: 12em;
  border:1px solid;
  border-radius: 50%;
  margin: 0.75em auto 0;
  transform:rotate(90deg);
}

.circle-container a {
  display: inline-block;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: blue;
  margin:-0.3em -0.1em;
}
a:first-child,
a:nth-child(6) {
  margin-left:2em;
}
a:nth-child(1),a:nth-child(2) {
  margin-top:0.3em;
}
＆＃13; 
<div class='circle-container'>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
  <a href='#'></a>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题