css 컬럼과 내용

이것은 아마도 가장 자주 묻는 질문입니다. 그러나 나는 나를 위해 일하는 것으로 보이는 것을 찾을 수 없었습니다. 저는 초보자입니다. @ styling/css.css 컬럼과 내용

Name_____DOB______Contact

이 아래에, 내용이있을 것이다 :

은 내가 헤더 (첫 번째 행)로 할 수 있습니다 크로스 브라우저 호환 솔루션 (IE9 이상 BTW) 3 열을 부탁합니다. 데이터 행 및 div (열에 포함 된) 데이터 행을 올바르게 열 제목 함께 정렬 할. 현재

나는이있다 : 나는 그래서 난 그냥 루프에 대한 데이터의 수집을 통과하기 위해 사용하고 사업부에 그것을 밖으로 뱉어하고 면도기와 MVC4을 사용하고있는 데이터의 관점에서

<div style="width: 100%"> 
    <div style="width: 300px; float:left">Name</div> 
    <div style="width: 200px; float:left">DOB</div> 
    <div style="width: 100px; float:left">Contact</div> 
</div>

예 :

[for loop here] 

    <div id="[email protected]"> 
     [data here] 
    </div> 
[end for loop]

출처

2013-09-10 Ahmed ilyas

표를 만들려면 '

' –

을 사용하십시오. 그러나 '

'을 사용하면 레이아웃을 만드는 것이 바람직하지 않습니다. 테이블을 만드는 가장 좋은 방법. 휠을 발명하려고하지 마라 ** 테이블에는 **

**을 사용한다. – avrahamcool

이전/구식 등으로 인해 테이블을 사용하지 않으려 고했지만 CSS3 및 HTML5와 함께 앞으로 나아가고 싶습니다. –

답변

동일한 방법으로 계속 진행할 수 있습니다.

<div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name</div> 
     <div style="width: 200px; float:left">DOB</div> 
     <div style="width: 100px; float:left">Contact</div> 
    </div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name 1</div> 
     <div style="width: 200px; float:left">DOB 1</div> 
     <div style="width: 100px; float:left">Contact 1</div> 
    </div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name 2</div> 
     <div style="width: 200px; float:left">DOB 2</div> 
     <div style="width: 100px; float:left">Contact 2</div> 
    </div> 
    .. 
</div>

나는 그것을 사용하는 것을 강력히 권장하지 않습니다. 테이블을 대신 사용하십시오. (BTY로) : 마크 업과 CSS를 섞어서 사용하지 마십시오.

HTML :

<div> 
    <div> 
     <div class="column col1">Name</div> 
     <div class="column col2">DOB</div> 
     <div class="column col3">Contact</div> 
    </div> 
    <div> 
     <div class="column col1">Name 1</div> 
     <div class="column col2">DOB 1</div> 
     <div class="column col3">Contact 1</div> 
    </div> 
    <div> 
     <div class="column col1">Name 2</div> 
     <div class="column col2">DOB 2</div> 
     <div class="column col3">Contact 2</div> 
    </div> 
    .. 
</div>

CSS :

.column 
{ 
    float: left; 
} 
.col1 
{ 
    width: 300px; 
} 
.col2 
{ 
    width: 200px; 
} 
.col3 
{ 
    width: 100px; 
}

width: 100%;이 (사업부 등) 블록 요소의 기본 동작입니다 그래서 당신은 생략한다.

출처

2013-09-12 21:42:02 avrahamcool

답변

관련 문제