Get div's to behave like a table_问答_开发者_运维开发者技术经验分享

So I'm really trying to use divs exclusively, as opposed to using tables for layout purposes, but I'm still getting stuck here and there. Today I have one of those开发者_JS百科 cases.

Consider the following markup:

<div style="width:943px;margin:0px auto;height:auto">
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(tl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(t.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(tr.png);width:26px;height:25px"></div>
    </div>
    <div style="height:auto;display:block;clear:both">
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(l.png) repeat-y;width:26px;height:100%"></div>
        <div style="padding:0 15px;height:100%;float:left;width:835px;display:block-inline;background:#FFF;clear:none;">
            <br />
            Some text heeere.
            <br />
            Some more text heeere.
        </div>
        <div style="float:left;width:26px;display:block-inline;clear:none;background:url(r.png) repeat-y;width:26px;height:100%"></div>
    </div>
    <div style="display:block;clear:both">
        <div style="float:left;display:block-inline;clear:none;background:url(bl.png);width:26px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(b.png) repeat-x;width:865px;height:25px"></div>
        <div style="float:left;display:block-inline;clear:none;background:url(br.png);width:26px;height:25px"></div>
    </div>
</div>

Now this is what's its doing:

Get div's to behave like a table

Note that it's going slightly past the page height.

This is what I want it to do:

Get div's to behave like a table

I want it to fluidly "fit" to the text without me specifying a height. It seems that the problem lies with the two side divs that won't work unless you specify the height as 100%. Is there maybe another/easier way to do this?

Thanks!

If the data is tabular (meaning it falls into proper rows and columns semantically, not just visually) you should use a table.

If it is just the layout you prefer, there is a css rule that might help, but not for all browsers:

div.column {
   display: table-column;
}

div.cell {
  display: table-cell;
}

This assumes you assign all of your "column" divs the class of column and your "cell" divs the class of cell.

The full list of display options for table-like behavior is:

table   
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

If the width is going to be fixed why not use a single background image for each of the three "rows":

<style type="text/css">
.container    {width:943px;}
.header       {background:url(header.png) no-repeat;}
.body         {background:url(body.png) repeat-y;}
.footer       {background:url(footer.png) repeat-none;}
</style>

<div class="container">
    <div class="header">&nbsp:</div>
    <div class="body">
        <br />
        Some text heeere.
        <br />
        Some more text heeere.
    </div>
    <div class="footer">&nbsp;</div>
</div>

The divs will naturally stack and expand to the full width of the container.

You asked for it, so here goes. This is my hand crafted, cross-browser, standards-compliant method of doing image borders on flexible containers.

I've assumed an image border size of 16px here, you will need to adjust this to suit. Also, for clarity in the absense of images I have added borders. Thse should be removed, obviously.

Demo.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Borders</title>
<style>
.outer {
    position:relative;
    float: left;
    border: 1px solid blue
}
.inner {
    border: 1px solid green
}
.tl, .tm, .tr, .ml, .mr, .bl, .bm, .br {
    border: 1px solid red;
    margin: 0;
    padding: 0;
}
.tm, .bm, .tl, .tr, .bl, .br {
    height: 16px
}
.tl, .tr, .bl, .br {
    width: 16px
}
.tm, .bm {
    height: 16px;
    margin: 0 0px
}
.tm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.bm {
    background-repeat:repeat-x;
    margin: 0 16px
}
.tl {
    position: absolute;
    top: 0;
    left: 0;
}
.tr {
    position: absolute;
    top: 0;
    right: 0;
}
.bl {
    position: absolute;
    left: 0;
}
.br {
    position: absolute;
    right: 0;
}
.ml {
    padding-left: 16px;
    background-repeat:repeat-y
}
.mr {
    padding-right: 16px;
    background-repeat:repeat-y;
    background-position: 100% 0
}
</style>
</head>
<body>
<div class="outer">
    <div class="tm">
        <div class="tl"></div>
        <div class="tr"></div>
    </div>
    <div class="ml">
        <div class="mr">
            <div class="inner">
                <h2>Lorem</h2>
                <p>Ipsum dolor</p>
            </div>
        </div>
    </div>
    <div class="bm" >
        <div class="bl"></div>
        <div class="br"></div>
    </div>
</div>
</body>
</html>