각 주제에 대한 행과 각 행에 4 개의 열이있는 포럼 스타일 페이지를 만듭니다.CSS - DIV 표를 만드는 올바른 방법
테이블 형 데이터가 아닌 레이아웃이 더 많으므로 Div 's를 사용하기로했습니다. 그러나 저는 Divitius에 대해 우려하고 있습니다. http://jsfiddle.net/XFUm9/
이 달성 또는 내가 제대로 일을 한 더 나은, 더 효율적인 방법이 있습니다 :
이것은 내가 그것을 발견 한 방법은?
난 당신이 다른 시나리오
.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }
난 당신이 약속 접근 방식은 스타일을 많이 줄여 성능을 향상시킵니다.
은 다음을 참조하십시오 https://github.com/stubbornella/oocss/wiki/ (객체 지향 CSS)
내가 모든 노력 나를 위해 수행 Twitter Bootstrap - Scaffolding 좋아한다. 또는 960 Grid도 좋습니다. 나는이 바이올린 여기 http://jsfiddle.net/thiswolf/zVapK/
했다
페이지
<!Doctype html>
<head>
<title>
Divs
</title>
<style type="text/css">
.right-rows{
float:right;
}
.green{float:left; margin-left:20px; background-color:green;}
.blue{float:left; margin-left:20px; background-color:blue;}
.purple{float:left; margin-left:20px; background-color:purple;}
.orange{float:left; margin-left:20px; background-color:orange;}
.grey{float:left; margin-bottom:20px; background-color:grey;}
.main{}
.row{width:900px;height:auto;}
.to-the-left{float:left;}
</style>
</head>
<body>
<div class="main">
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
<article>
<div class="grey row">
<p class="to-the-left">Lorem ipsum</p>
<div class="right-rows">
<div class="green row-1">
<p>Row one</p>
</div>
<div class="blue row-2">
<p>Row two</p>
</div>
<div class="purple row-3">
<p>Row three</p>
</div>
<div class="orange row-4">
<p>Row four</p>
</div>
</div>
</div>
</article>
</div>
</body>
</html>