如何创建响应式三列布局？

Question

左右圆圈固定在60px宽度，中间圆圈需要取宽度。

Answer 1

您需要使用width: calc(100% - 100px);

之类的CSS

Answer 2

您可以使用CSS table，它几​​乎适用于所有浏览器。

.table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    border: 4px solid blue;
}
.table > div {
    display: table-cell;
    vertical-align: middle;
}
.table .middle {
    width: 100%;
}
.table .left span, .table .right span {
    display: block;
    width: 60px;
    height: 60px;
    background: green;
    border-radius: 50%;
}
.table .middle span {
    display: block;
    border: 4px solid;
    padding: 10px;
}

<div class="table">
    <div class="left"><span></span></div>
    <div class="middle"><span>Hello World</span></div>
    <div class="right"><span></span></div>
</div>