Question

我有一个标题栏，我正在尝试创建3个部分：左，中，右。

所有内容都必须垂直居中并向后兼容IE7，这就是我使用表格的原因，除非你有一个更简单的解决方案。

正如您现在所看到的，中心内容表正在堆叠。如何设置样式以使表格并排排列？

更新：我尝试了一个建议。这些表现在是并排的，但你会注意到，当其中一个表突出显示，格式化关闭时，它仍然不太正确。我还需要突出显示的蓝色内容来准确填充容器。

UPDATE2：好的，我刚刚意识到部分问题。我的浏览器放大了125％...当我缩小时，容器和底部之间实际上没有1个像素空间。

更新3：保罗提供了一个适合我的解决方案。我很感谢所有的建议。

.container{
    white-space: nowrap;
    background-color: red;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    float: none;
    position: fixed;
}
table {
    height: 50px;
    border-spacing: 0px;
}
td {
    padding: 0px;
}

.cell-left {
    float:left;
}
.cell-selected {
    background-color:blue;
    color:white;
}
.cell-right {
    position:absolute; 
    top:0px; 
    right:0px;
}

<div class='container'>
    <div class='cell-left'>
        <table class='cell cell-selected'><tr><td>
            LEFT
        </td></tr></table>
    </div>
<center>
<table class='cell'><tr>
<td><table class='cell cell-selected'><tr><td>CENTER1</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER2</td></tr></table></td>
<td><table class='cell'><tr><td>CENTER3</td></tr></table></td>
</tr></table> 
</center>
    <div class='cell-right'>
        <table class='cell'><tr><td>
            RIGHT
        </td></tr></table>
    </div>
</div>

Answer 1

使用td标签而不是中心部分内的三个表。

<table class='cell'>
  <tr>
    <td>CENTER1</td>
    <td>CENTER2</td>
    <td>CENTER3</td>
  </tr>
</table>

[EDIT]版只有一个表http://jsfiddle.net/drvn9x26/33/

Answer 2

缺少中心表的浮动div，不应该是：

<div  class='cell-left'><table class='cell'><tr><td>
        CENTER1
    </td></tr></table></div>
    <table class='cell'><tr><td>
        CENTER2
    </td></tr></table>
    <div  class='cell-right'><table class='cell'><tr><td>
        CENTER3
    </td></tr></table></div>

但不管怎样，为什么不为每个结构级别使用一个表而不是每个元素的表。

有关堆积表，请参阅 DEMO 1 。

有关嵌套表的信息，请参阅DEMO 2。

对于具有突出显示功能的嵌套表，请参阅 DEMO 3 （尝试悬停！）。

有关所有单元格的相等高度，请参阅 DEMO 4 。

请参阅DEMO 5，了解最左边和最右边的细胞和中心细胞的调整宽度，以及它们之间的所有内容。

请参阅DEMO 6，了解最左侧和最右侧单元格和中心单元格的调整宽度尽可能小。

Answer 3

可能的解决方案没有表格和一点点JS在每列上设置相同的高度。 .before和<span class="before"></span>在此处替代:before（因为它不能在IE7上运行）

http://jsfiddle.net/OxyDesign/p3tv9n5m/

HTML

<div class='container'>
    <div class='cell cell-left'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
    <div class='cell cell-center'>
        <span class="before"></span><span class="cell-content">content<br />content<br />content</span>
    </div>
    <div class='cell cell-right'>
        <span class="before"></span><span class="cell-content">content</span>
    </div>
</div>

CSS

.container {
    position:relative;
}
.cell{
    width:33.3333333333333%;
    float:left;
}
.cell .before {
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.cell-content {
    display:inline-block;
    vertical-align:middle;
}
.cell-left{
    text-align:left;
    background:#ccc;
}
.cell-center{
    text-align:center;
    background:#ddd;
}
.cell-right{
    text-align:right;
    background:#ccc;
}

JS

$(document).ready(function(){
    var cells = $('.cell'),
        cellsLgth = cells.length,
        maxHeight = 0;

    for(var i = 0; i < cellsLgth; i++){
        var height = cells.eq(i).height();
        if(height > maxHeight)  maxHeight = height;
    }
    cells.css('height',maxHeight);
});

Answer 4

.container{
white-space: nowrap;
background-color: red;
top: 0px;
left: 0px;
width: 100%;
position: fixed;
text-align:center;
}
table {
width:100%;
border-spacing: 0px;
}

table td {
width:33.3333%;
height:50px;
line-height:50px;
}


<div class='container'>

<table>
    <tr>
        <td>LEFT</td> 
        <td>CENTER</td>
        <td>RIGHT</td>
    </tr>
</table>

</div>

http://jsfiddle.net/drvn9x26/39/

使用CSS，尝试将多个表并排放置并对齐

4 个答案: