使用jQuery在一个div内平均间隔3个div，以制作4个相等的部分

Question

I have a table cell that I would like to split into 4 pixel perfect equal 'sections'.

This is being done by having 3 divs that are 1px wide (lines) these are then positioned using margin-left on top of another div.

I'm doing this in jQuery as we need to account for the extra space taken up by the lines.

I have this working fine.. but all of the sections are not exactly the same width. I have taken into account (I think) the 3 lines by removing 3px from the width of the cell and then dividing the remaining into 4 (4 sections...) As the cell gets bigger so does the difference in section size.

This could of course be done in pure CSS by have the width of the lines in % instead of px. BUT having the lines at 0.5% does not render well. I prefer 1px.

I have a feeling I'm missing something simple?

Here is the fiddle.

http://jsfiddle.net/sQAg2/

Code:

<style>
        body {
        padding: 30px;
    }

    .testTable {
        margin: 0 auto;
        border: 1px solid #f9f9f9;
        width: 100%;
    }

    .testTable tr th {
        padding: 10px;
        border: 1px solid #c1c1c1;
        box-sizing: border-box;
    }

    .testTable tr th:first-child {
        width: 30%;
    }

    .testTable tr td {
        background: #f9f9f9;
        border: 1px solid #c1c1c1;
        box-sizing:border-box;

    }

    .line {
        position: relative;
        background: #000;
        width: 1px;
        min-height: 20px;
        float: left;
        z-index: 9999;
    }
</style>

<table id="" cellspacing="0" cellpadding="0" class="testTable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Col 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="position: relative; width: 100%; overflow: hidden;">

                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="line"></div>
                    <div class="block" style="width: 50%; min-height: 20px; background: green; z-index: 1; margin-left: 30%;"></div>
                    <div class="" style="clear: both;"></div>
                </div>

            </td>
            <td>Testing 2</td>
            <td>Testing 3</td>
            <td>Testing 4</td>
            <td>Testing 5</td>
        </tr>
    </tbody>

</table>

<script>

var cellWidth,
    lineMargin;

// Get the width of a cell and remove 3px due to 3 x 1px lines?
cellWidth = $('.testTable tbody tr:first').find('td').width() - 3;

// divide by 4 due to 4 sections
lineMargin = (cellWidth / 4);

$('.line').css('margin-left', lineMargin);

</script>

Answer 1

假设您不需要IE8。

margin-left: calc(25% - 1px);