Question

我正在尝试用细胞制作一个div表。在细胞内部，我想放置另一个圆形的div。我试图解决的问题是，当我调整浏览器窗口的大小时，div圈会适应它并保持比例。

正如你在图像中看到的那样，当我缩小窗口的大小时，圆圈的大小就可以了，但是当窗口处于正常大小时，圆圈太大而我不知道如何限制它。

https://gyazo.com/ebd2f44131dcc2e84b9d0e5cdaf12aed

缩小窗口

https://gyazo.com/6b8889f2d6c59b74bc7036061cf62627 https://gyazo.com/afb97aa2093e7331ae100420e1bac9c9

stylesheet.css中

body,html{
    height: 100%;
    width: 100%;
}

.Table{
    display: table;
    position: relative;
    margin: 0 auto 0 auto;
    //border:solid;/////////////////////////////////////
   // width: 100%;
   // height: 100%;
    background-color: yellow;
     table-layout: fixed;

     width:80%;
    height:80%;
}


.Row{
    display: table-row;

}

.Cell{
    display: table-cell;
   // border: 5px;
    border:solid;
  //  border-color: black;
   // border-radius: 25px;
    //background-color: blue;
        width: 33%;
    height: 33%;
}

.circle {

  width: 100%;

    height:0;
    padding-bottom: 100%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
    background: #4679BD; 

}

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="estils.css">

    </head>
    <body>


        <div class="Table">
            <div class="Row">
             <div class="Cell"   >eeee</div>
                <div class="Cell"   >aaaaa</div>  
                <div class="Cell"   >iiii</div>     
            </div>
            <div class="Row">
                <div class="Cell"   >eeee</div>
                <div class="Cell"   >aaaaa</div>  
                <div class="Cell"   >iiii</div>  
            </div>
               <div class="Row">
                   <div class="Cell"   >
                       <div class="circle"   ></div>
                   </div> 
                   <div class="Cell"   >
                       <div class="circle"   ></div>
                   </div> 
                   <div class="Cell"   >
                       <div class="circle"   ></div>
                   </div> 
            </div>

        </div>

    </body>
<html>

Answer 1

您可能希望使用media-queries。

@media (min-width: 1000px)
.circle {
    width: 100px;
    height: 100px;
    display: block;
    margin: 0 auto;
    padding: 0;
}

会做到这一点。但@media (max-width: 1000px)取决于浏览器窗口的宽度。

调整div圈的大小

1 个答案: