2017-09-25 1 views
4

Meine Anforderung ist wie folgt: enter image description here
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

Antwort

2

Sie waren ganz in der Nähe.

Auf .circle Verwendung:

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

und auf .container Verwendung:

position: relative 

Um sicherzustellen, dass der Kreis in der Mitte bleibt unabhängig von der Bildschirmgröße.


Arbeitsbeispiel:

.container { 
 
    position: relative 
 
} 
 

 
.circle { 
 
    z-index: 10; 
 
    width: 13em; 
 
    height: 13em; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.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>

1

Versuchen,

.circle { 
 
    z-index: 10; 
 
    position: absolute; 
 
    width: 13em; 
 
    height: 13em; 
 
    border-radius: 50%; 
 
    background: lightblue; 
 
    top: 60px; 
 
    left: 50%; 
 
    margin-left: -91px; 
 
} 
 

 
.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>

Verwandte Themen