HTML – CSS格式保持在一起

有一点时间让这种格式正确,所以任何想法将不胜感激.我们有一堆关于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中执行所有操作都适用于布局,但实际上您要列出包含行和列的内容.这是我书中的一个表格.

HTML – CSS格式保持在一起

解决方法

猜你在找的HTML相关文章