使用CSS,尝试将多个表并排居中对齐
Using CSS, trying to center and align multiple tables side by side
我有一个标题栏,我试图在其中创建3个部分:左、中、右。
所有内容都必须垂直居中,并与IE7向后兼容,这就是我使用表的原因,除非你有更简单的解决方案。
正如您现在看到的,中心内容表正在堆叠。如何设置样式以使表格并排对齐?
演示:http://jsfiddle.net/drvn9x26/35/
更新:我尝试了一个建议。这些表现在是并排的,但你会注意到,当其中一个表高亮显示时,格式设置关闭时,它仍然不太正确。我还需要高亮显示的蓝色内容来准确填充容器。
更新2:好的,我刚刚意识到问题的一部分。我的浏览器放大了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>
使用td标记,而不是中间部分中的三个表。
<table class='cell'>
<tr>
<td>CENTER1</td>
<td>CENTER2</td>
<td>CENTER3</td>
</tr>
</table>
[EDIT]版本,只有一个表http://jsfiddle.net/drvn9x26/33/
中心表的浮动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了解调整后的最左侧和最右侧单元格宽度,并且中心单元格尽可能小。
没有表和一点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);
});
.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中的按钮对齐
- 仅在 CSS 向上滚动(与顶部对齐)时修复了 CSS 中的布局位置
- 使用绝对css将图像与正在换行的文本对齐
- 如何对齐画布旁边的文本和按钮(WebGL+JavaScript+CSS)
- HTML 和 CSS 在所有屏幕尺寸上垂直对齐正文网站
- 如何在CSS中将文本相互对齐并使图像宽度为屏幕
- Css浮动:右100%高度,图像底部对齐
- 在 css 中对齐三个框
- CSS 元素不会正确对齐
- CSS - 动态创建的居中对齐下拉列表
- CSS:将三个按钮对齐成两行
- 元素忽略位置:修复了在 CSS 中对齐的问题
- CSS 不会对齐 DIV 中的文本
- JS,Rails,CSS - 将按钮与页面上其他内容的底部对齐
- 在对齐作为 css 圆圈的导航列表元素的基线时遇到问题
- 使用css进行对齐和填充
- 使用CSS垂直对齐图像
- JQUERY Galleria css在Firefox中的位置对齐问题.适用于Chrome
- CSS菜单对齐问题-新手开发人员
- PHP:如何使用simple_html_dom解析器将CSS文本对齐属性添加到元素的现有内联样式属性中