文本未在2列中对齐

时间:2017-01-31 09:29:10

标签: html css

我有一行有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>

6 个答案:

答案 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)

它因为包装类。删除内容包装器类并放置包装器而不是它。

并且还给出了表格的宽度尺寸。所以,你可以找到对齐方式。

有效。