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。

Answer 2

你可以用表格或div來做，但是，爲了靈活性和一致性，我建議你在div上做。

表：

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

事業部：

去這裏，中心DIV是最大的一個，側格是別人，不要取下透明DIV，它是隻有一個浮點修復的HTML。只需相應地將CSS更改爲你想要的。

http://jsfiddle.net/EsQak/

Answer 3

我會限制使用表的表格數據。根據您的描述，我認爲這將適用於您。你正在做的是將一個固定的寬度設置到中間列，並將結束列的寬度設置爲50％，然後在中央列的每半寬度上設置負邊距。 CSS可能會更有效一些。

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; 
}