1

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

4

3 回答 3

1

I would restrict the use of tables to tabular data. Based on your description, I think this will work for you. What you are doing is setting a fixed width to your middle column and setting the width of the end columns to 50% and then setting a negative margin on each to half of the width of the center column. The CSS could be a little more efficient.

http://jsfiddle.net/CLRxq/1/

HTML

<div class="wrapper">
    <div class="left">Add Image here</div>
    <div class="center">&nbsp;</div>
    <div class="right">&nbsp;</div>
</div>

CSS

.wrapper {
    overflow: hidden;
}
.center {
    float: left;
    width: 1000px;
    background: red;
}
.right {
    float: right;
    width: 50%;
    background: green;
    margin-right: -500px;
}

.left {
    float: left;
    width: 50%;
    background: blue;
    margin-left: -500px;
    text-align: right;
}
于 2013-08-25T12:32:23.743 回答
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;
}

还要检查演示。

于 2013-08-25T12:18:38.093 回答
-1

你可以用表格或 div 来做这件事，不过，这取决于你，为了灵活性和一致性，我建议在 div 上做。

桌子：

<table width="1200" height="100">
    <tbody>
    <tr>
        <td></td>
        <td width="1000"></td>
        <td></td>
    </tr>
    </tbody>
</table>

分区：

去这里，center div是大的，side div是其他的，不要删除clear div，它只是html的浮动修复。只需根据您的需要更改 CSS。

http://jsfiddle.net/EsQak/

于 2013-08-25T12:18:42.487 回答