我正在尝试用细胞制作一个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>
答案 0 :(得分:0)
您可能希望使用media-queries
。
@media (min-width: 1000px)
.circle {
width: 100px;
height: 100px;
display: block;
margin: 0 auto;
padding: 0;
}
会做到这一点。但@media (max-width: 1000px)
取决于浏览器窗口的宽度。