4
我的要求是这样的： 
圆形div被其他4个div环绕。 我试过这样：在所有设备的容器中心放置圆形div
.circle {
z-index: 10;
position: absolute;
width: 13em;
height: 13em;
border-radius: 50%;
background: lightblue;
top: 60px;
right: 40%;
}
.corners {
background: #eee;
color: #333;
position: relative;
overflow: hidden;
}
.text {
border: 1px solid #ccc;
padding: 8px 20px 8px;
height: 150px;
}
.arc-bottom-l,
.arc-bottom-r,
.arc-top-l,
.arc-top-r {
position: absolute;
background: #fff;
width: 210px;
height: 210px;
border-radius: 50%;
border: 1px solid #ccc;
}
.arc-bottom-l {
bottom: -100px;
left: -100px;
}
.arc-bottom-r {
bottom: -100px;
right: -100px;
}
.arc-top-l {
top: -100px;
left: -100px;
}
.arc-top-r {
top: -100px;
right: -100px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container" style="height:300px; text-align:center;">
<div class='circle'></div>
<div class="row">
<div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6">
<div class="text"></div>
<div class="arc-bottom-r"></div>
</div>
<div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6">
<div class="text"></div>
<div class="arc-bottom-l"></div>
</div>
</div>
<div class="row" style="height:0px"></div>
<div class="row">
<div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6">
<div class="arc-top-r"></div>
<div class="text"></div>
</div>
<div class="corners col-md-6 col-sm-6 col-lg-6 col-xs-6">
<div class="arc-top-l"></div>
<div class="text"></div>
</div>
</div>
</div>
</body>但我不能让所有设备。如何为所有设备制作这个东西并相应地放置中间的div？ 我尝试过，在div之间添加空格，并在容器中心创建圆形div，但是当我调整窗口大小时，它会变形。