流体圆形元素旁边的圆形元素

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);
	$(".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;
}

下一个 div 应该填满可用空间

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