javascript - 使用 jQuery 在 div 内等间隔 3 个 div 以制作 4 个相等的部分

Question

我有一个表格单元格，我想将其分成 4 个像素完全相等的“部分”。

这是通过设置 3 个 1 像素宽(线)的 div 来完成的，然后使用 margin-left 将它们定位在另一个 div 的顶部。

我在 jQuery 中执行此操作，因为我们需要考虑行占用的额外空间。

我的这个工作正常..但所有部分的宽度都不完全相同。我已经考虑到(我认为)这 3 条线，方法是从单元格的宽度中删除 3px，然后将剩余部分分成 4(4 个部分......)随着单元格变大，部分大小的差异也会变大。

这当然可以在纯 CSS 中完成，方法是将线宽设为 % 而不是 px。但是线条为 0.5% 时渲染效果不佳。我更喜欢 1px。

我觉得我缺少一些简单的东西？

这是 fiddle 。

http://jsfiddle.net/sQAg2/

代码:

<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);