Meine Anforderung ist wie folgt:
Ein kreisförmiges div von anderen 4 Divs umgeben. Ich habe versucht, auf diese Weise:Legen Sie kreisförmige div in der Mitte des Behälters für alle Gerät
.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>
aber ich konnte es nicht für alle Geräte machen. Wie mache ich das Ding für alle Geräte und positioniere das mittlere Div entsprechend? Was ich versuchte, Hinzufügen von Leerzeichen zwischen den Divs und machen das kreisförmige div in der Mitte des Containers, aber wenn ich die Größe des Fensters ändern wird es verzerrt. Diese