bg color on row divs

Question

나는 css 수레에 표 내용을 넣는 방법을 배우려고합니다.

"table"레벨, "row"레벨 및 "cell"레벨에서 div를 사용했습니다. 이것이 좋은 전략인지 확신하지 못합니다.

어쨌든 "테이블"또는 "셀"레벨에서 배경 스타일을 설정하면 색상이 변경 될 수 있습니다. 행 수준에서 설정하면 흰색으로 유지됩니다.

어떤 일이 벌어지고 있는지 추측 할 수 있습니까? 이 작업을 수행하는 더 좋은 방법이 있습니까?

<h2>"Tables" work</h2> 
<div style="width: 455px; background-color:#a4c4fc"> 
    <div> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div> 
     <div style="width: 70px; float: left">1<LEFT></div> 
     <div style="width: 220px; float: left">3</div> 
     <div style="width: 50px; float: left">4</div> 
    </div> 
</div> 

<br> 

<h2>"Row" divs do not seem to work</h2> 
<div style="width: 455px"> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">0</div> 
     <div style="width: 220px; float: left">0</div> 
     <div style="width: 50px; float: left">1</div> 
    </div> 
</div> 

<br> 

<h2>Individual cell divs work</h2> 
<div style="width: 455px"> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left; background-color:#a4c4fc">ID</div> 
     <div style="width: 220px; float: left; background-color:#a4c4fc">Lemons</div> 
     <div style="width: 50px; float: left; background-color:#a4c4fc">Horseradish</div> 
    </div> 
    <br clear: both> 
    <div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left; background-color:#a4c4fc">0</div> 
     <div style="width: 220px; float: left; background-color:#a4c4fc">0</div> 
     <div style="width: 50px; float: left; background-color:#a4c4fc">1</div> 
    </div> 
</div> 

Answer 1

이것은 표 형식의 데이터처럼 보입니다.

해당하는 경우이 정보를 표시하려면 HTML table 요소를 사용해야합니다.

너무 많은 사람들이 "테이블이 좋지 않다"는 말을 잘못 듣고 테이블이 가장 적합한 경우에도 div를 사용하여 해결하려고 노력합니다.

사람들이 테이블을 사용해서는 안된다고 말하면 레이아웃 구조를 참조합니다. 이 경우에는 여전히 사용하는 것이 좋으며 악의가 아닙니다!

그럼 당신은 할 수 있습니다 :

<tr style="background-color:#a4c4fc;"> 

</tr> 

---

는 "세포"div의 모든 float:left;을하기 때문이다 DIV의 문제를 사용하는 방법에 대한 확신합니다. 따라서 "행"div에는 높이가 없습니다. , 또는

<div style="background-color:#a4c4fc"> 
     <div style="width: 70px; float: left">ID</div> 
     <div style="width: 220px; float: left">Lemons</div> 
     <div style="width: 50px; float: left">Horseradish</div> 
     <div style="clear:both;overflow:hidden;height:0;"></div> 
</div> 

display:inline-block;

<div style="background-color:#a4c4fc"> 
     <div style="width: 70px; display:inline-block;">ID</div> 
     <div style="width: 220px; display:inline-block;">Lemons</div> 
     <div style="width: 50px; display:inline-block;">Horseradish</div> 
</div> 

http://jsfiddle.net/hRCWk/2/

를 사용하지 않지만 :

당신은이 문제를 해결하기 위해 's를 "세포"의 맨 아래에 다음을 추가 할 수 있습니다 그렇게하려면 table을 사용하십시오.

Answer 2

귀하의 수레를 취소하십시오. 행 div에 overflow:hidden;을 추가하십시오.

또한 <br clear: both>은 의미가 없습니다. 그것을 제거하거나 사용 <div style="clear:both;"></div>

데모 : http://jsfiddle.net/RX8Pq/ 모든 하위 요소가 떠 있기 때문에 행 요소가 신장되지

Answer 3

:

대신에 당신이 그 (것)들을 설정할 수 있습니다 당신이 요소를 DIV 부동의 http://www.quirksmode.org/css/clearing.html

Answer 4

인라인 블록으로 표시하려면 ...

display:inline-block; 

DI를 지울 필요가 없습니다. V는 나중에 뜬다.분명히이 IE8 및 이전 버전에서 작동하지 않습니다 : 물론

, 당신은 어쨌든

참고 테이블을 사용해야합니다.