浮动多个表
我有点卡在我的桌子上......我一直在两张桌子之间留下间隙，我想删除。任何人都可以解释我如何消除两个垂直表之间的差距吗？
以下是我所看到的和不正确的例子（差距）：
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/
3 个答案:
答案 0 :(得分：3)
问题是，通过浮动表格，“一行”总是相同的高度。 如果你想要在左侧和右侧清洁它们，你必须将左侧的右侧部分包裹在单独的盒子中，然后漂浮它们。
<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/
答案 1 :(得分：0)
在facebook的时间线中做到这一点。使用左浮动并适当向右浮动。当然你需要分别知道每个表的高度。您可以使用JavaScript和左右两个类来完成。
答案 2 :(得分：0)
您可以合并一些表格以无间隙地显示它们
这样的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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？