有一点时间让这种格式正确,所以任何想法将不胜感激.我们有一堆关于foos的信息,我们希望将它们组合在一起.因此,如果我们彼此相邻列出了一堆foos,如果该元素导致foos换行,整个foo将保持在一起.格式应如下所示：因此文本位于左侧,数字位于右侧.
|-----------------------------------------------------| |[icon] Brad (human) [pic] (2) [pic] (3)| |-----------------------------------------------------|
因此主要图标最左边是名称和模型,然后右对齐是兄弟姐妹和孩子(每个都有css嵌入图标).
每个foo都可以具有以下内容：
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>
重要的是我想把整个foo保持在一起,因为我在整个页面使用这个结构.如果需要,foo的结构可以改变,我可以完全控制它.
解决方法
这是一个允许使用表的示例.因为这是表格数据.有些.
在div中执行所有操作都适用于布局,但实际上您要列出包含行和列的内容.这是我书中的一个表格.
