div를 사용하여 격자 표시

Question

일부 CSS/HTML을 연습하려고하는데 div를 사용하여 테이블에서 수행해야 할 작업을 나열하고 있습니다.

나는 마진을 설정할 때 일부 텍스트가 다른 텍스트보다 길기 때문에 텍스트가 열에 제대로 정렬되지 않아서 들쭉날쭉 한 테이블이 생성된다는 문제가 있습니다.

123 hello coool 
123 asdfasdfsadf cool 
123 hello coool 
123 asdfasdfasdf kkk 

따라서 각 섹션 간의 간격은 20px로 정확합니다. 그러나 텍스트의 길이는 다양하기 때문에 정렬되지 않습니다.

무엇이 문제입니까? 이 해결책은 거기에 (나는 테이블이 더 쉬울 것이라고 알고 있지만, div 방법을 배우고 싶다.)

Answer 1

div가 서로 나란히 정렬되게하려면 어떻게해야합니까? 즉, 행을 시뮬레이트 하시겠습니까? 예를 들어 플로트를 사용하는 경우 float: left이면 효과는 일반적으로 수축 포장입니다. 수축 포장 된 div에서는 div의 너비가 자동으로 콘텐츠의 길이와 일치합니다.

순수한 html/css 방법은 div의 width 속성을 명시 적으로 설정 한 것입니다. 열의 각 divs을 동일한 명시적인 너비로 설정해야합니다. 이것이 효과적이기 위해서는 콘텐츠의 길이에 대한 아이디어가 필요하며 적어도 width으로 설정해야합니다.

div 열에있는 각 div이 가장 긴 콘텐츠를 갖는 것으로 끝나는 폭을 동적으로 상속 받기를 원하면 javascript를 사용해야합니다.

Answer 2

아마 너는 그것들을 자동으로 크기 조정하게하는 고정 너비를 할당하지 않을 것이다. 테이블은 자동으로 열의 각 셀을 동일한 너비로 만듭니다. 그러나 s를 사용하여 수행 할 수 없으므로 고정 너비를 설정해야합니다.

Answer 3

각 열을 고유 한 div로 만들 수 있습니다. EG :

<div class="col1"> 
    <p>123</p> 
    <p>123</p> 
    <p>123</p> 
    <p>123</p> 
</div> 
<div class="col1"> 
    <p>hello</p> 
    <p>asdfasdfasdf</p> 
    <p>hello</p> 
    <p>asdfasdfasdf</p> 
</div> 
<div class="col1"> 
    <p>cooool</p> 
    <p>cooool</p> 
    <p>cooool</p> 
    <p>cooool</p> 
</div> 

와 할

.col1 { 
    float: left; 
} 

하지만 그것은 단지 아픔과 고통을 초래할 것입니다.

나는 왜 이렇게하고 싶은지 모르겠다. 아마도 "테이블이 잘못"이라고 들었지만 불완전합니다. 전체 구문은 "테이블이의 경우 잘못되었습니다"입니다.

이와 같이 표 형식의 데이터에 표를 사용하십시오.

Answer 4

테이블 대 div가 아니 어서 테이블 대 의미 론적 마크 업이어야합니다. div로 모든 테이블 요소를 바꾸면 전체적인 부분을 놓치고있는 것입니다.

또한 예제에서는 표를 사용합니다.