流體圓形元素旁邊的圓形元素

Question

CSS可能具有以下佈局嗎？如果沒有，是否有比我現在的JS解決方案更好的解決方案？看一個完整的例子小提琴。

+--------------------+ 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|     | 
|--------------------+ 
|+----+ +----------+| container height in percentage, e.g. 20% of window 
|| 1 | | 2  || button 1: a circle based on container height 
|+----+ +----------+| button 2: fill available space and fully round corners 
+--------------------+ 

基本問題是，第一個元素需要是基於容器高度的圓形，即圓角正方形。第二個元素應該用相同的邊界半徑填充剩餘空間。

以下是我如何用JS解決它，但它似乎不太可靠的移動設備上。而且該項目基本上僅限於移動設備。另外，如果佈局過於依賴JS，那麼在使用CSS進行幻想轉場等時會造成其他麻煩。

小提琴：http://jsfiddle.net/n52x1ws1/3/

$(document).ready(function(){ 
 
    var height = $(".device-fluid").find(".btn-circle").height(); 
 
    var borderRadius = height/2; 
 
    
 
    $(".device-fluid").find(".btn-circle").css("width", height); 
 
\t $(".device-fluid").find(".btn-circle").css("border-radius", borderRadius); 
 
    
 
    var fluidWidth = $(".device-fluid").find(".container").width() - height - 15; 
 
    
 
    $(".device-fluid").find(".btn-fluid").css("width", fluidWidth); 
 
    $(".device-fluid").find(".btn-fluid").css("border-radius", borderRadius); 
 
});

* { 
 
    box-sizing: border-box; 
 
    font-family: sans-serif; 
 
} 
 
.device { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 320px; 
 
    height: 480px; 
 
    border: 2px solid #ccc; 
 
    margin: 30px; 
 
    text-align: center; 
 
} 
 
.label { 
 
    margin-top: 30px; 
 
} 
 
.container { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 20%; 
 
    padding: 15px; 
 
    background: #f7f7f7; 
 
} 
 
.btn { 
 
    height: 100%; 
 
} 
 
.btn-circle { 
 
    float: left; 
 
} 
 
.btn-fluid { 
 
    float: right; 
 
} 
 

 
.device-fixed .btn-circle { 
 
    width: 66px; /* easy since we know the height */ 
 
    border-radius: 33px; 
 
    background: #2ecc71; 
 
} 
 
.device-fixed .btn-fluid { 
 
    width: 205px; /* available space minus a 15px margin */ 
 
    border-radius: 33px; 
 
    background: #27ae60; 
 
} 
 

 
.device-fluid .btn-circle { 
 
    width: 20%; /* this needs to be equal to the height */ 
 
    border-radius: 50%; 
 
    background: #2ecc71; 
 
} 
 
.device-fluid .btn-fluid { 
 
    width: 75%; /* this needs to fill the rest of the available space minus a 15px margin */ 
 
    border-radius: 50%; 
 
    background: #27ae60; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="device device-fixed"> 
 
    <div class="label">fixed</div> 
 
    <div class="container"> 
 
     <div class="btn btn-circle"></div> 
 
     <div class="btn btn-fluid"></div> 
 
    </div> 
 
</div> 
 

 
<div class="device device-fluid"> 
 
    <div class="label">fluid with JS</div> 
 
    <div class="container"> 
 
     <div class="btn btn-circle"></div> 
 
     <div class="btn btn-fluid"></div> 
 
    </div> 
 
</div>

Answer 1

我不完全相信你在百分比

容器高度，例如是什麼意思窗口的20％

如果這意味着容器的高度由視口的大小決定，則可以使用視口單位。 1vh等於視口高度的1％。

.container { 
    height: 20vh; 
} 

然後，您可以輕鬆地在此基礎上高度圈：

.btn-circle{ 
    height: 20vh; 
    width: 20vh; 
    border-radius: 10vh; 
} 

下格應填寫的可用空間

.btn-fluid{ 
    height: 20vh; 
    width: calc(100vw - 20vh); /*100% of the viewport width minus the space for the square*/ 
    border-radius: 10vh; 
} 

It looks like this in a fiddle.