<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circles {
height: 150px;
width: 150px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<h1> </h1>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
</div>
</body>
</html>
我试图使2个圆圈在顶部和2在底部使用css。所有4个圆都需要在一个方框内。还添加了一些颜色的圆圈。什么好主意吗?这是我目前看到的
把你所有的div放在一个容器里
<div class='container'>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
</div>
将容器的显示设置为网格，并让它有2列
.container {
display:grid;
grid-template-columns: 150px 150px;
padding: 20px;
background-color: red;
width: min-content;
}
将宽度设置为min-content将容器的大小从横跨屏幕的整个宽度调整为仅具有最小宽度
请参阅下面的代码片段以获得完整的解决方案
.circles {
height: 150px;
width: 150px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.container {
display: grid;
grid-template-columns: 150px 150px;
padding: 20px;
background-color: red;
width: min-content;
}<h1> </h1>
<div class='container'>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
</div><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style>
.circles {
height: 150px;
width: 150px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
</head>
<body>
<div class="container">
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
<span class="circles"></span>
</div>
</body>
</html>