我有这个 CSS 表代码:
.navgroups table#rightTable {
float: right;
width: 33%;
}
.navgroups table#leftTable {
float: left;
width: 33%;
}
.nvagroups td#centerTable {
margin: auto;
}
在中间的表中,我想插入一个图像,但问题比 33%(图像大小)还要大。 中间表格中的每个字母都会降低左侧表格的栏位。
我尝试了 display:inline
和 display:inline-block
。
最佳答案
我只是把这个作为答案,我认为根据您提供的信息,没有人能比这个做得更好。
HTML:
<table class="rightTable">
<tr>
<td></td>
</tr>
</table>
<table class="leftTable">
<tr>
<td></td>
</tr>
</table>
<table class="centerTable">
<tr>
<td>
<img src="http://www.greeningaustralia.org.au/images/global/gallery-image.jpg" />
</td>
</tr>
</table>
CSS:
.rightTable {
float: right;
width: 33%;
}
.leftTable {
float: left;
width: 33%;
}
.centerTable {
margin: auto;
width: 33%;
}
table {
outline: 1px solid;
}
img {
width: 100%;
}
这是 3 个表格,全部 33.33%
且图像适合中心表格。
在下面的演示中,我们在其他表中有文本。工作正常。
<小时/>更新:
使用 1 个表而不是 3 个表的演示。
关于javascript - CSS 表影响另一个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21335090/