2017-09-25 32 views
4

我的要求是這樣的: enter image description here
圓形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,但是當我調整窗口大小時,它會變形。

回答

2

你是非常接近的。

.circle使用:

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

.container使用:

position: relative 

要確保圓圈中間停留,無論屏幕大小。


工作實施例:

.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

試試這個,

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

相關問題