Question

我有一个特定高度的flex-box容器div。里面有几个不同相对宽度的div，都有100％的容器高度。每个div都有一个小的居中文本，我想在圆圈内显示。圆的半径必须是父div高度的百分比。

我知道有几个问题，人们希望将div的高度基于它的相对宽度，并且有一个技巧可以通过使用padding-top作为一个方面来解决这个问题 - 比。但我希望与此相反。我开始认为这可能是不可能的，所以我只是要求确认。

＆＃13;

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>relative height exp</title>
        <style>
          #container {
            display: flex;
            width: 100%;
            height: 50px;
          }
    
          .items {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            border: 1px solid black;       
          }
    
          #item1 {
            width: 10%;
          }
    
          #item2 {
            width: 20%;
          }
    
          #item3 {
            width: 30%;
          }
    
          #item4 {
            width: 40%;
          }
    
          .inner {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 50%;
            border-radius: 50%;
            border: 2px solid brown;
            background-color: burlywood;
          }
        </style>
      </head>
      <body>
        <div id="container">
          <div class="items" id="item1">
            <div class="inner">A</div>
          </div>
          <div class="items" id="item2">
            <div class="inner">B</div>
          </div>
          <div class="items" id="item3">
            <div class="inner">C</div>
          </div>
          <div class="items" id="item4">
            <div class="inner">D</div>
          </div>
        </div>
      </body>
    </html>

＆＃13;

所以，在css类inner中，我将宽度设置为50％（显然不起作用），但我想以某种方式将它与该类的高度联系起来。

div的基本宽度与它的相对高度有关

0 个答案: