我有一行有2列,其中有一些文字:My Website Example。我不明白为什么2列上的文字没有对齐?文本的右侧比左侧飞得更高。它们应该是一致的。
怎么可能?
有很多CSS,所以我没有在这里复制代码。但是有一个jsfiddle here。
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
<table>
<tr>
<td>
<strong>Detaljer om værelset:</strong>
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td>
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
答案 0 :(得分:3)
你的类'wrapper'有填充,但它只在左边的表上不是正确的
答案 1 :(得分:2)
you missed the class wrapper in the right column.Due to this the right side text is flying over.
答案 2 :(得分:1)
由于你申请了.wrapper
课程的填充。
您的实际代码
td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}
替换为
td.wrapper {
position: relative;
}
希望它有效!
答案 3 :(得分:1)
<html>
<head>
<title></title>
</head>
<body>
<table class="body" align="center">
<tr>
<td class="center" align="center" valign="top">
<table class="row footer">
<tr>
<td class="wrapper" valign="top">
<table class="six columns">
<tr>
<td class="left-text-pad">
<table>
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
</td>
</tr>
<tr>
<td>
<strong>Detaljer om værelset:</strong>
</td>
</tr>
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
</td>
</tr>
<tr>
<td class="left-text-pad">A content text 1
</td>
</tr>
<tr>
<td class="left-text-pad">
<h5>A Headline</h5>
</td>
</tr>
<tr>
<td class="left-text-pad">A content text 2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
答案 4 :(得分:0)
看着你的小提琴,你只将.wrapper
类放在外表的第一个td
上。它有一个10px的填充顶部,这是引起偏差的原因。因此,要么将相同的类添加到其他td,要么删除它,或者删除padding-top规则。
答案 5 :(得分:0)
它因为包装类。删除内容包装器类并放置包装器而不是它。
并且还给出了表格的宽度尺寸。所以,你可以找到对齐方式。
有效。