7
Có một khoảng thời gian để nhận định dạng này chính xác để mọi ý tưởng đều được đánh giá cao. chúng tôi có một loạt thông tin liên quan đến foos mà chúng tôi muốn giữ lại với nhau. Vì vậy, nếu chúng tôi có một bó số foos được liệt kê bên cạnh nhau, nếu yếu tố đó gây ra foos để bọc, toàn bộ foo sẽ ở cùng nhau. Ngoài ra, định dạng sẽ trông giống như sau: Vì vậy, văn bản ở bên trái và các số nằm ở bên phải.Định dạng CSS để giữ lại với nhau
|-----------------------------------------------------|
|[icon] Brad (human) [pic] (2) [pic] (3)|
|-----------------------------------------------------|
Vì vậy, biểu tượng chính ở bên trái là tên và mô hình, và sau đó căn phải là anh chị em và trẻ em (có biểu tượng nhúng css cho mỗi).
Mỗi foo có thể có những điều sau đây:
foo.id = 12345
foo.name = 'brad'
foo.model = 'human'
foo.image = ''
foo.kids = 3
foo.siblings = 2
foo.link = ''
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >
body
{
margin: 0;
padding: 0;
min-width: 850px;
text-align: left;
line-height: 28px;
font-size: 14px;
font-family: Verdana,Tahoma,Arial;
}
#content
{
width: 800px;
border: solid 1px #000000;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div.foo
{
display: inline;
min-width: 250px;
width: 250px;
border: dotted 1px #b8b8b8;
padding: 0px 15px 0px 0px;
vertical-align: middle;
}
.foo .id
{
display: none;
}
.foodata
{
display: inline;
text-align: left;
white-space: nowrap;
margin: 2px 2px 2px 2px;
}
.fooname
{
display: inline;
min-width: 80px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.foomodel
{
display: inline;
min-width: 80px;
color: #000000;
font-size: 12px;
}
.foocounts
{
min-width: 90px;
text-align: right;
display: inline;
}
.foosiblings
{ /* add in image for children */
background: url(../../images/siblings.png) no-repeat 4px 10%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fookids
{ /* add in image for connection */
background: url(../../images/kids.png) no-repeat 4px 25%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fooimage
{
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content" >
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Brad</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(3)</span>
<span class="fookids" >(2)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Tom</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(1)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Harry</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(6)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Sally</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Peggy</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(12)</span>
<span class="foosiblings" >(16)</span>
</span>
</a>
</div>
</div>
</body>
</html>Phần quan trọng là tôi muốn giữ lại toàn bộ foo với nhau, trong một đoạn lớn kể từ khi tôi sử dụng cấu trúc này tất cả o ver trang. Nếu cần cấu trúc của foo có thể thay đổi, tôi có toàn quyền kiểm soát cấu trúc đó.
nếu bạn xem ví dụ của tôi, văn bản (tên, biểu tượng, mô hình) được căn trái, trong khi số lượng (trẻ em, anh chị em) được căn phải theo div.foo chung –
Bạn có thể đã bị tẩy não quá nhiều với " bảng là xấu ". Chúng chỉ ** ** xấu cho * bố cục *, không phải để trình bày * dữ liệu bảng *. – BalusC
Tôi không cảm thấy rằng đó là dữ liệu dạng bảng vì nó chỉ là một hàng. cố gắng làm điều đó đúng ngữ nghĩa thay vì sau đó đánh dấu bảng nhanh chóng và dễ dàng (nếu có cách nào). –