HTML 3 列标题

Question

我正在尝试制作水平分成 3 部分的固定标题。中央部分有 1000px 宽度，其他 2 个部分具有相同的大小和自动宽度。左边的部分也有一个边缘粘在中央部分的图像。我尝试了几种解决方案，但我只能通过使用表格来实现。谁能帮我解决这个问题？

Answer 1

您可以使用 div 来实现，显示为表格单元格。

HTML:

<div class="header">
    <div class="l">l</div>
    <div class="m">m</div>
    <div class="r">r</div>
</div>

CSS:

.header {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.header > div {
    display: table-cell;
}
.l {
    background: lightblue;
}
.m {
    background: lightgreen;
    width: 500px;
}
.r {
    background: lightblue;
}

同时检查 the demo .