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,但是當我調整窗口大小時,它會變形。