html - 浮动多个表

Question

我在浮动我的桌子时有点卡住了。我总是在两张桌子之间留下一个我想删除的间隙。谁能解释我如何消除两个垂直表之间的间隙？

这是我所看到的和不正确的示例（差距）：

在此处输入图像描述

HTML：

<head>
    <meta charset="UTF-8" />
    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>

<body>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Technical details</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">TV tuner integrated</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Cooling type</td>
            <td class="spec-features-value">active</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Form factor</td>
            <td class="spec-features-value">ATX</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Number of processors installed</td>
            <td class="spec-features-value">1</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Fill rate</td>
            <td class="spec-features-value">28.8 billion texels/sec</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter family</td>
            <td class="spec-features-value">NVIDIA</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum operating temperature</td>
            <td class="spec-features-value">98 °C</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Processor</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics processor</td>
            <td class="spec-features-value">GeForce GT 640</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum resolution</td>
            <td class="spec-features-value">2560 x 1600 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics processor family</td>
            <td class="spec-features-value">NVIDIA</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Processor clock speed</td>
            <td class="spec-features-value">901 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Shader clock</td>
            <td class="spec-features-value">1802 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter RAMDAC</td>
            <td class="spec-features-value">400 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Parallel processing technology support</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum analog resolution</td>
            <td class="spec-features-value">2048 x 1536 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Maximum digital resolution</td>
            <td class="spec-features-value">2560 x 1600 pixels</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Stream processors</td>
            <td class="spec-features-value">384</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Memory</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Discrete graphics adapter memory</td>
            <td class="spec-features-value">2048 MB</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Graphics adapter memory type</td>
            <td class="spec-features-value">DDR3-SDRAM</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory bus</td>
            <td class="spec-features-value">128 bit</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory clock speed</td>
            <td class="spec-features-value">1782 MHz</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Memory bandwidth (max)</td>
            <td class="spec-features-value">28.5 GB/s</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>System requirements</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Mac compatibility</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Minimum system power supply</td>
            <td class="spec-features-value">350 W</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Ports & interfaces</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Interface type</td>
            <td class="spec-features-value">PCI Express 3.0</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DVI-D ports quantity</td>
            <td class="spec-features-value">2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">VGA (D-Sub) ports quantity</td>
            <td class="spec-features-value">1</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DVI port</td>
            <td class="spec-features-value">2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI ports quantity</td>
            <td class="spec-features-value">1</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Weight & dimensions</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Number of slots</td>
            <td class="spec-features-value">2</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Video</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">PhysX</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">CUDA</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">DirectX version</td>
            <td class="spec-features-value">11</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Shader model version</td>
            <td class="spec-features-value">5.0</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">OpenGL version</td>
            <td class="spec-features-value">4.2</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDMI version</td>
            <td class="spec-features-value">1.4a</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Full HD</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Dual Link DVI</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">HDCP</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">CUDA cores</td>
            <td class="spec-features-value">384</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">3D Vision</td>
            <td class="spec-features-value">Y</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Operating system/software</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">Windows operating systems supported</td>
            <td class="spec-features-value">Yes</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Mac operating systems supported</td>
            <td class="spec-features-value">N</td>
        <tr>
        <tr class="spec-features">
            <td class="spec-features-name">Linux operating systems supported</td>
            <td class="spec-features-value">Yes</td>
        <tr>
    </tbody>
</table>
<table class="spec-table">
    <tbody>
        <tr class="spec-name">
            <td>Packaging content</td>
        </tr>
        <tr class="spec-features">
            <td class="spec-features-name">User guide</td>
            <td class="spec-features-value">Yes</td>
        <tr>
    </tbody>
</table>
</body>
</html>

CSS：

* {
    font-family: Helvetica;
}
body {
    width: 700px;
}
.spec-table {
    font-size: 11px;
    width: 330px;
    float: left;
}
.spec-table .spec-name {
    font-weight: bold;
    color: #373333;
    padding-bottom: 20px;
}
.spec-table > tbody > .spec-features {
    color: #4B4B4B;
    width: 60%;
}
.spec-table .spec-features-name {
    padding-left: 10px;
    background: #eee;
    height: 15px;
}
.spec-table .spec-features-value {
    padding-left: 10px;
}
tr > td:first-child {
    width: 200px;
}

这是一个带有我的代码的 jsfiddle：http: //jsfiddle.net/markasoftware/Na7KB/

score 3 · Accepted Answer

问题是，通过浮动表格，“一行”总是相同的高度。如果您希望它们在左侧和右侧清洁，您必须将左侧和右侧部分包裹在单独的盒子中，然后将它们浮动。

<div id="left">
    <!-- All your left tables-->
    <table class="spec-table">
        ...
    </table>
    ...
</div>
<div id="right">
    <!-- All your right tables -->
    <table class="spec-table">
        ...
    </table>
    ...
</div>

并且还调整了css

#left, #right {
    float: left;
}
.spec-table {
    font-size: 11px;
    width: 330px;
}

这是一个工作小提琴：http: //jsfiddle.net/AQpG6/

score 0 · Accepted Answer

像 facebook 在他们的时间线上那样做。适当地使用左浮动和右浮动。当然你需要分别知道每张桌子的高度。你可以用 JavaScript 和左右两个类来做到这一点。

score 0 · Accepted Answer

您可以合并一些表格以无间隙地显示它们

像这样的 HTML 锄头

<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="6.css">
</head>


<body>

<table class="spec-table">
<tbody>
    <tr class="spec-name">
        <td>Technical details</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">TV tuner integrated</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Cooling type</td>
        <td class="spec-features-value">active</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Form factor</td>
        <td class="spec-features-value">ATX</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Number of processors installed</td>
        <td class="spec-features-value">1</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Fill rate</td>
        <td class="spec-features-value">28.8 billion texels/sec</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter family</td>
        <td class="spec-features-value">NVIDIA</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum operating temperature</td>
        <td class="spec-features-value">98 °C</td>
    <tr>

            <tr class="spec-name">
        <td>Memory</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Discrete graphics adapter memory</td>
        <td class="spec-features-value">2048 MB</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter memory type</td>
        <td class="spec-features-value">DDR3-SDRAM</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory bus</td>
        <td class="spec-features-value">128 bit</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory clock speed</td>
        <td class="spec-features-value">1782 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Memory bandwidth (max)</td>
        <td class="spec-features-value">28.5 GB/s</td>
    <tr>


            <tr class="spec-name">
        <td>Weight & dimensions</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Number of slots</td>
        <td class="spec-features-value">2</td>
    <tr>


            <tr class="spec-name">
        <td>Operating system/software</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Windows operating systems supported</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Mac operating systems supported</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Linux operating systems supported</td>
        <td class="spec-features-value">Yes</td>
    <tr>
</tbody>
</table>

<table class="spec-table">
<tbody>
    <tr class="spec-name">
        <td>Processor</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics processor</td>
        <td class="spec-features-value">GeForce GT 640</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum resolution</td>
        <td class="spec-features-value">2560 x 1600 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics processor family</td>
        <td class="spec-features-value">NVIDIA</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Processor clock speed</td>
        <td class="spec-features-value">901 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Shader clock</td>
        <td class="spec-features-value">1802 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Graphics adapter RAMDAC</td>
        <td class="spec-features-value">400 MHz</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Parallel processing technology support</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum analog resolution</td>
        <td class="spec-features-value">2048 x 1536 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Maximum digital resolution</td>
        <td class="spec-features-value">2560 x 1600 pixels</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Stream processors</td>
        <td class="spec-features-value">384</td>
    <tr>


            <tr class="spec-name">
        <td>System requirements</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Mac compatibility</td>
        <td class="spec-features-value">N</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Minimum system power supply</td>
        <td class="spec-features-value">350 W</td>
    <tr>
</tbody>


    <tr class="spec-name">
        <td>Ports & interfaces</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">Interface type</td>
        <td class="spec-features-value">PCI Express 3.0</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DVI-D ports quantity</td>
        <td class="spec-features-value">2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">VGA (D-Sub) ports quantity</td>
        <td class="spec-features-value">1</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DVI port</td>
        <td class="spec-features-value">2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI ports quantity</td>
        <td class="spec-features-value">1</td>
    <tr>

            <tr class="spec-name">
        <td>Video</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">PhysX</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">CUDA</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">DirectX version</td>
        <td class="spec-features-value">11</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Shader model version</td>
        <td class="spec-features-value">5.0</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">OpenGL version</td>
        <td class="spec-features-value">4.2</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDMI version</td>
        <td class="spec-features-value">1.4a</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Full HD</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">Dual Link DVI</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">HDCP</td>
        <td class="spec-features-value">Yes</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">CUDA cores</td>
        <td class="spec-features-value">384</td>
    <tr>
    <tr class="spec-features">
        <td class="spec-features-name">3D Vision</td>
        <td class="spec-features-value">Y</td>
    <tr>


             <tr class="spec-name">
        <td>Packaging content</td>
    </tr>
    <tr class="spec-features">
        <td class="spec-features-name">User guide</td>
        <td class="spec-features-value">Yes</td>
    <tr>

</tbody>
</table>



</body>
</html>

html - 浮动多个表

3 回答 3

Related

Reference