한 줄로 된 이미지와 표본

Question

나는 500px (너비)와 500px (너비)의 표가있다. (표는 부트 스트랩에서 나온 것이다.)

한 줄에 이미지와 테이블을 보여주고 싶지만 테이블 아래에 테이블이 있습니다.

Answer 1

간단히 대답하면 (OP의 제한된 정보에 기반 함) 테이블과 이미지에 display: inline-block을 사용하는 것입니다.

다른 대안으로는 이미지를 테이블의 추가 열 (또는 열의 배경색)에 배치하는 것입니다.

Answer 2

jsFiddle demo

은 여기 IMG 및 TABLE 인라인 보여주는 간단한 예이다. display: inline-block;은 요소를 같은 줄에 삽입하는 데 사용되지만 인라인 블록을 사용하면 두 가지 부작용을 알아야합니다.

먼저 인라인 블록 요소 사이의 공백 (공백, 탭, 줄 바꿈 문자)이 출력에 렌더링됩니다. 인라인 블록 요소를 단어로 생각하십시오. 단어 사이에 공백을 넣으면 공백이 렌더링됩니다. 이를 상쇄하려면 두 번째 요소에 음수 여백을 사용하거나 HTML의 두 요소 사이에 공백을 제거하면됩니다.

둘째, 인라인 블록 요소는 수직 정렬 속성을 설정할 수 있습니다. 두 요소를 서로 가운데에 수직으로 정렬하려면이 방법이 좋습니다. 그러나 요소를 동일한 높이에 두려면 CSS에 명시 적으로 vertical-align: top;을 설정해야합니다.

부트 스트랩을 사용 중이기 때문에 TABLE의 너비도 100 %로 설정됩니다. TABLE에 명시적인 너비를 설정하거나 요소를 기본값 인 "필요한만큼 증가"로 되돌릴 수 있습니다. width: auto;

테이블도 그 안에 들어있는 내용에 맞게 커집니다. 부트 스트랩은 CSS에 max-width: 100%;을 설정하여이를 해결합니다. 너비를 설정할 때 테이블에 최대 너비를 정의하거나 을 사용해야합니다.