テキストが2列に整列していません

2列の行があります。テキストは、My Website Exampleです。なぜ2列のテキストが整列していないのか分かりません。テキストの右側は、左側よりも上に飛んでいます。彼らは整列されるべきです。テキストが2列に整列していません

どのようにすることができますか？

CSSがたくさんあるので、私はここにコードをコピーしませんでした。しかし、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>

出典

2017-01-31 Ne Kr

class = "wrapper"を指定した左側のtdのように、右側の表の分割にパディングの上部と右側がありません。右側にpadding-topL10pxを置くだけで動作します。 –

Webインスペクタを使用してください;） – kiwi1342

<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>

出典

2017-01-31 09:48:44

上記のコードを使用して私に質問を教えてください.. –

あなたのクラスのラッパーは "パディングが、その唯一の左のテーブルの上にいない右あなたのフィドルを見てみると

出典

2017-01-31 09:31:36

を持って、あなただけの外側のテーブルの最初のtdに.wrapperクラスを置きます。これは、10pxのパディングトップがあり、これが不均衡の原因となっています。そのため、同じクラスを他のTDに追加するか、削除するか、またはパディングトップルールを削除します。

出典

2017-01-31 09:32:46 lukas84

ああ私はそれを見ることができます。私はクラスを今追加しました：http://vouzalis.com/test.html。しかし、600pxのブレークポイントに達すると、左の列は非常に小さくなり、右の列は大きくなります。 2列のサイズが同じであるようにするにはどうすればよいですか？ –

これは、埋め込みのために.wrapperクラスに適用しました。

あなたの実際のコード

td.wrapper { padding: 10px 20px 0px 0px; position: relative; }

は td.wrapper { position: relative; }

は、それが動作ホープと交換してください！

出典

2017-01-31 09:38:24 Ranjith

それは今働いているように見えます。 600pxのブレークポイントに達すると、左の列は非常に小さくなり、右の列は大きくなります。 2つの列が600pxのブレークポイントで同じサイズになるようにするにはどうすればよいですか？ –

you missed the class wrapper in the right column.Due to this the right side text is flying over.

出典

2017-01-31 09:50:48 sneha

そのラッパークラスので。コンテンツラッパークラスを削除し、代わりにラッパーを配置します。

また、テーブルの幅のサイズを指定します。したがって、整列を見つけることができます。

これは機能します。

出典

2017-01-31 09:52:54

テキストが2列に整列していません

答えて

関連する問題