CSS Formatting to Keep Together_问答_开发者_运维开发者技术经验分享

Having a heck of a time with getting this formatting correct so any ideas would be appreciated. we have a bunch of information pertaining to foos that we want to keep grouped together. So if we had a bunch of foos listed next to each other, if that element causes the foos to wrap, the entire foo would stay together. Also the formatting should look like: So the text is to the left and the numbers are to the right.

|-----------------------------------------------------|
|[icon] Brad (human)              [pic] (2)  [pic] (3)|
|-----------------------------------------------------|

So the main icon is leftmost then the name and model, and then right aligned is the siblings , and kids (with css embedded icons for each).

Each foo can have the following:

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 .开发者_JAVA百科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>

The important part is I want to keep the entire foo together, in one big chunk since I use this structure all over the page. If needed the structure of the foo can change, I have complete control over it.

The white-space:nowrap style does prevent the "foo" divs from breaking, but I also found it caused them to blow out of the width defined in the "content" div.

I found the following worked in IE, Firefox, and Chrome (pc only, don't have access to a Mac just now)

div.foo
{
    display:inline-block;
}

This is an example where tables are 'allowed' to be used. Because this is tabular data. Somewhat.

Doing everything in div is fine for layouts, but you're actually listing things with rows and columns. That's a table in my book.

To keep everything together, add this:

div.foo
{
  white-space:nowrap;
}

So you have a bunch of divs, each containing some content, and you want them displayed next to each other, in a row?

.foo { float: left; }

will make them float to the left and they will all appear next to each other; each box shrink-wrapped to the minimum width needed.

This thread is viciously old but for anyone who may happen upon it...

The modern solution is to use a flexbox. It can get heavy but diverting load from the server (HTML generation) to the client (calculating flexbox or even JS) seems to be de rigeur these days, especially in order to maintain semantic readability. float works but efforts to make clearfix more than a persistent hack seem to have been deprecated in favor of CSS 3 solutions.

Try something like this:

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

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

You'd need to copy your link through to wrap individual elements (once again, heavier but more semantically correct) and you'd likely want to give each a separate class so you could target it in your stylesheet for a specific width, alignment, etc.

NOTE: I got here myself looking for the display: inline-block; and white-space: nowrap; answers because they suited my need more than the accepted answer.

Whether the data are semantically a table is philosophical and pedantic. I defer to the discussion above and the, "right," answer is a very gray area. New CSS also offers a CSS-based table model and if your sensibility leads you to a table being semantically mostly-correct but you don't want to rewrite as <table>, <tbody>, <tr>, and <td>, there's now a very good intermediate option. It would require shuffling your HTML but by the looks of the OP this is likely automatically generated so likely easy.