Question

代码：

     <div className="color-container">
      <div className="inline" id="red"></div>
      <div className="inline" id="green"></div>
      <div className="inline" id="yellow"></div>
      <div className="inline" id="blue"></div>
    </div>

的CSS：

.color-container {
  width: 100px;
  height: 200px;
  display: inline;
  position: relative;
}
.inline {
  display: inline;
}
#red {
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 50% 0 0 0;
}
#yellow {
  height: 50px;
  width: 50px;
  background-color: yellow;
  border-radius: 0 50% 0 0;
}
#green {
  height: 50px;
  width: 50px;
  background-color: green; 
  border-radius: 0 0 50% 0;
}
#blue {
  height: 50px;
  width: 50px;
  background-color: blue;
  border-radius: 0 0 0 50%;
}

然而没有任何东西显示，即使我确实显示：内嵌在子divs元素和父母上我做了100px宽度和200px高度所以2个divs到底？

Answer 1

试试这种方式

<div class="color-container">
      <div class="inline" id="red"></div><div class="inline" id="green"></div><div class="inline" id="blue"></div><div class="inline" id="yellow"></div>
    </div>
    <br><br> <!-- Other Way-->
    <div class="color-container">
      <div class="inline" id="red"></div><!--
      --><div class="inline" id="green"></div><!--
      --><div class="inline" id="blue"></div><!--
      --><div class="inline" id="yellow"></div>
    </div>

https://jsfiddle.net/krj1egLk/3/

Answer 2

试试这个：

＆＃13;

#left {
  width: 50px;
  height: 50px;
  background-color: green;
  display: inline-block;
  border-radius: 100% 0 0 0
}

#right {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
  border-radius: 0 100% 0 0
}

#left2 {
  width: 50px;
  height: 50px;
  background-color: blue;
  display: inline-block;
  border-radius: 0 0 0 100%
}

#right2 {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
  border-radius: 0 0 100% 0
}

＆＃13;

<div>
  <div id="left"></div>
  <div id="right"></div>
</div>
<div>
  <div id="left2"></div>
  <div id="right2"></div>
</div>

＆＃13;

Answer 3

你到处使用className，这是错的，它只是类，所以你需要改变它：

<div className="color-container">

到

<div class="color-container">

如果您使用此：

display: inline;

您无法设置宽度和高度，因为内联元素无法设置宽度和高度。

相反，您需要使用display：inline-block：

.inline {
    display: inline;
}

然而内联块有一个问题，如果它们之间有空格，它们会在div之间增加一个间隙，所以需要从你的html中删除所有空格，如下所示：

 <div class="color-container"><div class="inline" id="red"></div><div class="inline" id="green"></div><div class="inline" id="yellow"></div><div class="inline" id="blue"></div></div>

如果您只想要一种颜色的圆圈，您可以这样做：

.circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;

}

Answer 4

这是我的小提琴：

my fiddle

如果我理解正确的话。这是我的答案！

    .color-container {
      width: 100%;
      height: 200px;
      display: inline-block;
      position: relative;
    }
    
    #red {
      height: 50px;
      width: 50px;
      background-color: red;
      border-radius: 50% 50% 50% 50%;
      display: inline-block;
    }
    #yellow {
      height: 50px;
      width: 50px;
      background-color: yellow;
      border-radius: 50% 50% 50% 50%;
      display: inline-block;
    }
    #green {
      height: 50px;
      width: 50px;
      background-color: green; 
      border-radius: 50% 50% 50% 50%;
      display: inline-block;
    }
    #blue {
      height: 50px;
      width: 50px;
      background-color: blue;
      border-radius: 50% 50% 50% 50%;
      display: inline-block;
    }

 <div class="color-container">
      <div class="red" id="red"></div>
      <div class="yellow" id="green"></div>
      <div class="green" id="yellow"></div>
      <div class="blue" id="blue"></div>
 </div>

如何在css div中制作圆圈？

4 个答案: