CSS 위치 테이블 서로 옆에

아래 HTML/CSS를 사용하여 3 개의 테이블이 있습니다. 나는 테이블 1과 테이블 2가 테이블 3과 "같은 라인"에서 서로 옆에 있고 싶지만 그 사이에 휴식을 취하고 싶습니다.CSS 위치 테이블 서로 옆에

그러나 float : left/right를 처음 두 테이블에 사용하면 테이블 3은 항상 테이블 1/2 바로 아래에서 "touching"됩니까? 내가 마진/투명/플로트를 시도 한 결과 문제가없는 것으로 감사받은 :(

어떤 도움을 줄 수 있도록 할 수없는 것

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <style type="text/css"> 
     DIV.search 
     { 
      width: 80%; 
      margin-right: auto; 
      margin-left: auto; 
     } 

     DIV.search TABLE 
     { 
      border: 1px solid black; 
      border-collapse: separate; 
     } 

     DIV.search TABLE.table1 
     { 
      float: left; 
      width: 45%; 
     } 

     DIV.search TABLE.table2 
     { 
      float: right; 
      width: 45%; 
     } 

     TABLE.table3 
     { 
      border: 1px solid black; 
      margin-top: 50px; 
      margin-right: auto; 
      margin-left: auto; 
      width: 80%; 
     } 
    </style> 
</head> 
<body> 
    <div class="search"> 
     <table class="table1"> 
      <tr> 
       <td> 
        TABLE 1 
       </td> 
      </tr> 
     </table> 
     <table class="table2"> 
      <tr> 
       <td> 
        TABLE 2 
       </td> 
      </tr> 
     </table> 
    </div> 
    <table class="table3"> 
     <tr> 
      <td> 
       TABLE 3 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2011-07-01 BlueChippy

귀하의 게시 된 코드는 크롬에서 나에게 잘 보인다 참조 사용되었다. 테이블 사이에 공간이 있습니다 ... http://jsfiddle.net/uJtFy/ 어떤 브라우저를 사용하고 있습니까? –

현재 사용중인 것은 무엇입니까? 나는 [jsFiddle] (http://jsfiddle.net/u4sCj/)을 만들었고 Chrome과 IE9에서 잘 작동합니다. – kapa

jsFiddle이 테이블 사이에 공간을 표시하는 이유를 잘 모르는 경우 페이지를 만들고 Chrome에서 열면 BlueChippy가 설명하는 것처럼됩니다. – Mark

당신은 몇 가지 추가 스타일을 적용해야합니다.

을

DIV.search 
{ 
    width: 80%; 
    margin-right: auto; 
    margin-left: auto; 

    overflow: hidden; /* Fixing the problem in modern browsers */ 
    zoom: 1; /* Fixing in old IE by applying hasLayout */ 
    padding-bottom: 50px; /* I prefer padding here than margin in table3 */ 
} 

TABLE.table3 
{ 
    border: 1px solid black; 
    /* margin-top: 50px; */ 
    margin-right: auto; 
    margin-left: auto; 
    width: 80%; 
}

시도해 볼 수 있습니다 (아래 답변에 있음). 그러나 이전 IE는 지원하지 않습니다.

출처

2011-07-01 14:20:14 Vladimir

좋은 분 ... 꿈처럼 작동합니다 :) – BlueChippy

조금 늦었지만 비슷한 해결책이있을 수 있지만 "display:inline-block"이라는 CSS에는 있지만 "display:inline-table"도 있습니다. 나를 위해 일한 :)

또한, 나를 위해 일하는 추가 것은

"float:left"이 here

출처

2013-10-10 08:35:51 user2681625

늦을 지 모르지만 이것은 훌륭한 대답입니다! 웹킷 브라우저에서 하나의 행에 많은 작은 테이블을 배치하려고 할 때 정확한 문제가 저장되었습니다. 감사! – Ferdy

CSS 위치 테이블 서로 옆에

답변

관련 문제