[英]Manipulating the height of a div class in an HTML table using CSS and a wicket
I have the following CSS code: 我有以下CSS代码:
.Divider {
padding-top:0px;
padding-bottom:500px;
}
and the following HTML 和以下HTML
<tr>
<td align="left">
<a wicket:id="button">
<img wicket:id="buttonImg" align="center" style="width:70%"/>
</a>
</td>
<td align="left" >
<div class="Divider"/>
</td>
</tr>
I would have expected 500px to be added as padding at the bottom of the image. 我本来希望将500px作为填充添加到图像的底部。 Instead it adds it top and bottom. 而是将其添加到顶部和底部。 I've tried fiddling with height - same result. 我试过摆弄高度-同样的结果。 Obviously I'm a stupid newbie but can anone give me a clue what form my stupidity is taking pls. 显然,我是一个愚蠢的新手,但是谁能给我一个线索,我的愚蠢正在采取什么形式。 Would be most grateful 将不胜感激
Try closing the Divider div this way. 尝试以这种方式关闭Divider div。
<div class="Divider"></div>
Original Code Example <div class="Divider" /> http://jsfiddle.net/rrBXU/1/ 原始代码示例<div class =“ Divider” /> http://jsfiddle.net/rrBXU/1/
Example with <div class="Divider"></div> http://jsfiddle.net/rrBXU/2/ <div class =“ Divider”> </ div>的示例http://jsfiddle.net/rrBXU/2/
You should be applying the padding to the same cell that the image is in. 您应该将填充应用于图像所在的同一单元格。
You can do it with the <div>
or apply the padding-bottom
property to the <img>
. 您可以使用<div>
或将padding-bottom
属性应用于<img>
。
<table>
<tr>
<td align="left">
<a wicket:id="button">
<img id="buttonImg" align="center" style="width:70%"></a>
<div class="Divider"></div>
</td>
</tr>
</table>
Also, if you give the containing table a class you'll have greater control over all elements within it by using CSS. 另外,如果为包含表提供一个类,则可以使用CSS对其中的所有元素进行更好的控制。 Example: 例:
<table class="container">
<tr>
<td>
<a><img src="..."></a>
</td>
</tr>
</table>
.container { }
.container td { }
.container td img { }
You can put the img tag in a div and give it the same style.Or to make it easier just add a new div with the "Divider" class and put the image in it. 您可以将img标记放入div中,并赋予其相同的样式。或者要使其变得更简单,只需添加带有“ Divider”类的新div并将图像放入其中。 The code will be like this: 代码将如下所示:
<td>
<div class="Divider">
..image or other content..
</div>
</td>
If there are other styling attributes in Divider: 如果Divider中还有其他样式属性:
<td>
<div class="Divider2" style="padding-top:0px;padding-bottom:500px;">
..image or other content..
</div>
</td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.