응답 열이 다른 열 아래에 있습니다.

기초 프레임 워크가있는 테이블의 2 열에서 많은 작업을했습니다. 600px 미만으로 창 크기를 조정할 때 열 1에서 열 2가 왜 내려가는지 이해할 수 없습니까? 창 크기를 조정하면 열이 서로 옆에 머물러 있기를 바랍니다. 각 열을 6 개로 채우도록 설정 했으므로 두 번째 열이 아래로 뛰어 내려서는 안됩니다.응답 열이 다른 열 아래에 있습니다.

아무도 내가 이것을 해결할 수있는 방법을 알고 있습니까? 코드는 이메일 뉴스 레터를위한 코드이므로 테이블을 사용하고 있습니다.

나는 CSS 코드 aswell와 JSfiddle 있습니다 jsfiddle

<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>Column 1</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> 
        <td class="wrapper"> 
        <table class="six columns"> 
         <tr> 
          <td class="left-text-pad"> 

          <h5>Column 2</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 big text to test if the text is responsive. 
           </td> 
           </tr> 
          </table> 
          </td> 
          <td class="expander"></td> 
         </tr> 
        </table> 
        </td> 
       </tr> 
      </table> 
     </center> 
     </td> 
    </tr> 
</table> 
</body>

출처

2017-01-31 Ne Kr

테이블 사용을 중지하십시오. 그냥 멈춰. – Tom

죄송합니다. 이메일을 쓰는 것을 잊어 버렸습니다. 그래서 저는 테이블을 사용해야합니다. –

코드가 여러면에서 잘못되었습니다. 테이블을 제거하고'div'를 대신 사용하십시오. 테이블/행에 기초 그리드 클래스를 적용 할 수는 없습니다. – Sebastian

먼저 래퍼 클래스 위 collumn2

출처

2017-01-31 10:14:42 Molarosa

해답을 가져 주셔서 감사합니다. 방금 솔루션을 시도했지만 불행히도 작동하지 않습니다. http://vouzalis.com/test.html –

의 두 번째 래퍼 TR 태그와 같은 내부 tag.So 쓰기 스타일이에 "float: left" 추가

출처

2017-01-31 12:02:55 sneha

이 글을 쓰는 시점에서 대부분의 이메일 클라이언트에는 여전히 중첩 테이블 레이아웃이 사용됩니다. 이에 대한 대답은 간단합니다. 모든 클라이언트가 속도가 빠르지는 않으며 일부 컴퓨터가 속도를 낼 수있는 것은 아닙니다.

html 전자 메일에서 표를 사용하는 것은 전자 메일 클라이언트에 관계없이 전반적인 배포에있어 가장 실용적이고 가장 좋은 방법입니다. 재단은 훌륭합니다. 그렇지만 이메일 업계 표준은 아직 없습니다.

Mailchimp에서 this handy tutorial을 살펴보십시오. 이 방법으로 잘못하지 않았 음을 분명히 밝히고 싶습니다. 앞에서 언급 한 자습서에서 반응 형 전자 메일 코딩을 배우는 것이 더 나을 것입니다.

당신이 당신의 jsfiddle에서 한 것은 실제로 정확합니다. 그러나 붕괴되기를 원하지 않는다면 @media query 문자열을 삭제하기 만하면됩니다.

출처

2017-01-31 21:46:40 scoopzilla

응답 열이 다른 열 아래에 있습니다.

답변

관련 문제