html - 我有一个关于在浏览器宽度上拉伸(stretch)形状的基本 CSS 问题

Question

我有一个关于在浏览器宽度上拉伸(stretch)形状的基本 CSS 问题。 enter image description here

我想把矩形放在两个三 Angular 形之间。

这是我的 HTML:

    <div id="monitor_top_left"></div>
    <div id="monitor_top_middle"></div>
    <div id="monitor_top_right"></div>

这是我的 CSS:

    #monitor_top_left {
        width: 0;
        height: 0;
        border-bottom: 60px solid #AFA995;
        border-left: 100px solid #5C5A4D;
        float: left;
    }
    #monitor_top_middle {
        width: 100%;        /* I need to stretch across the page */
        height: 60px;
        background: #AFA995;
        float: left;
    }
    #monitor_top_right {
        width: 0;
        height: 0;
        border-bottom: 60px solid #AFA995;
        border-right: 100px solid #5C5A4D;
        float: right;
    }
    .monitor_outer {
        clear: both;
    }

我的 float 属性有问题，获取三 Angular 形之间的矩形。对于响应式设计，我需要矩形是流畅的。

Answer 1

您可以将它们全部 float 到左侧并为它们分配适当的宽度:

#monitor_top_left {
    width: calc(15% -100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-left: 100px solid #5C5A4D;
    float: left;
}
#monitor_top_middle {
    width: 70%;        /* I need to stretch across the page */
    height: 60px;
    background: #AFA995;
    float: left;
}
#monitor_top_right {
    width: calc(15% - 100px); /* consider the border */
    height: 0;
    border-bottom: 60px solid #AFA995;
    border-right: 100px solid #5C5A4D;
    float: left;
}

示例:https://jsfiddle.net/9aumgL0q/2/