Question

有一点时间让这种格式正确，所以任何想法将不胜感激。我们有一堆与 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 的结构可以改变，我可以完全控制它。

Answer 1

white-space:nowrap样式确实阻止了“foo”div的破坏，但我也发现它导致它们超出了“content”div中定义的宽度。

我发现以下内容适用于IE，Firefox和Chrome（仅适用于PC，暂时无法访问Mac）

div.foo
{
    display:inline-block;
}

Answer 2

这是一个允许使用表的示例。因为这是表格数据。一些。

在div中执行所有操作都适用于布局，但实际上是列出了包含行和列的内容。这是我书中的一个表格。

Answer 3

要将所有内容保持在一起，请添加以下内容：

div.foo
{
  white-space:nowrap;
}

Answer 4

所以你有一堆div，每个都包含一些内容，你想让它们连续显示在一起吗？

.foo { float: left; }

会让它们浮动到左边，它们都会彼此相邻;每个盒子收缩包装到所需的最小宽度。

Answer 5

此线程很旧，但对于可能在此线程上发生的任何人……

现代的解决方案是使用flexbox。如今，它变得很沉重，但从服务器（生成HTML）到客户端（计算flexbox甚至是JS）的负载似乎已经变得越来越严格，尤其是为了保持语义可读性。 float可以工作，但是为了支持CSS 3解决方案，似乎已经不赞成将clearfix变成一种持久的黑客手段。

尝试这样的事情：

.foo {
  display: flex;
  /* Plenty more options, consult a flexbox doc. */
}

.foo > * {
  flex: 1 1 auto;
  width: 20%; /* Equal widths, but easy to edit. */
}

您需要复制链接以包装单个元素（再次，更重，但在语义上更正确），并且您可能希望为每个元素提供一个单独的类，以便可以在样式表中将其定位为特定宽度，对齐方式等。

注意：：我来到这里是在寻找display: inline-block;和white-space: nowrap;的答案，因为它们比我所接受的答案更适合我的需求。

从语义上讲，数据既是哲学表又是书呆子表。我按照上面的讨论进行讨论，“正确”的答案是一个非常灰色的区域。新CSS还提供了基于CSS的表模型，如果您的敏感性使您的表在语义上大体上是正确的，但您不想将其重写为<table>，<tbody>，<tr>以及<td>，现在有了一个很好的中间选项。这将需要重新整理HTML，但是通过OP的外观，这很可能会自动生成，因此很容易。

CSS格式保持在一起

5 个答案: