첨부 된 이미지별로 테이블과 같이 보이도록 관련 div 그룹을 어떻게 스타일링 할 수 있습니까? 고마워! div (예 : SharePoint 당 첨부)의 스타일을 지정하는 방법은 무엇입니까?
<div class="collection"
<div class="group">
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
... repeats n times
</div>
면책 조항 :이 특정 HTML 출력이 자동 생성 내가이 생성되는 것을 제어 할 수 없습니다. 방금 divs를 가지고 작업하고 그에 맞게 스타일을 지정하고 싶습니다.
미안하지만, 무슨 플로트?
모든 당신이을 필요로 영업 이익이 질문에 대한 대답은 실제로
.collection {display:table}
.group {display:table-row}
.label, .value {display:table-cell}
+1하지만 브라우저 지원이 IE8 +임을 참고합니다. 더 많은 브라우저 지원이 필요하면 float 메소드를 사용하십시오. – Michael
OK, 구형 브라우저에 대한 지원이 필요한지 여부에 대해서는 OP가 언급하지 않았습니다. 이 경우 실제 테이블을 사용합니다. 사실 CoffeeRain의 대답을지지했다. –
그래, 그는 필요한 브라우저 지원을 언급하지 않았으므로 정보에 입각 한 결정을 내릴 수 있도록 언급해야한다고 생각했습니다. 그리고 코멘트에서 그는 마크 업을 변경할 수 없다고 말했기 때문에 float 메소드를 사용자의 대답으로 대체했습니다. – Michael
나는 당신을 위해 일을 할 것입니다
.label {
width: 200px;
float: left;
}
(떨어져 다른 스타일의) 생각합니다.
HTML
<div class="collection">
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
</div>
CSS
.label { float:left; width:200px; border-top:1px solid #ccc; }
.value { margin-left:200px; background:#fffced; border-top:1px solid #ccc; }
DIV> DIV> DIV 대신 UL> LI> DIV 구조를 사용하는 것이 좋습니다. –
사실, 당신은 단지 테이블을 사용할 수 있습니다. 그것은 의미 론적으로 편리 할 것입니다.
그럼에도 불구하고 현재 HTML 구조를 고수 할 수 있습니다.
너비가있는 label 및 value의 클래스가있는 div를 할당 한 다음 왼쪽으로 떠 있습니다.
group 클래스의 높이를 지정해야 할 수도 있습니다.
테이블을 사용합니다. HTML here의 테이블에 대해 읽을 수 있습니다. <tr> 태그는 테이블 행을 정의합니다. <td> 태그는 테이블 데이터를 정의합니다. 각 <td> 태그는 새로운 열입니다.
<table>
<tr><td>This is the table data</td><td>This is more table data in the same row</td></tr>
<tr><td>Here is another row</td><td>This is more table data in the second row</td></tr>
</table>
그냥 테이블을 사용하는 것입니다 무슨 생각을 배척하려고 노력하면서. 표 형식의 데이터입니다. –
... 그리고 테이블을 사용하고 싶지 않더라도 적어도 목록을 가지고 있으므로 UL (목록)을 사용하십시오. –
테이블을 사용하는 것이 금기시되었을 때를 알고 싶습니다. 그것은 누군가가 "테이블을 사용하지 않는 테이블"이라는 혼란을 "테이블을 사용하지 마십시오"라고 혼동하는 것과 같습니다. – MetalFrog