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.

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

1 个答案: