我正在尝试生成一个 HTML/CSS 组合来显示一堆照片的联系表类型 View ，每张照片都有一些文本和一个或两个表单元素。我希望 View 填充可用宽度并根据需要换行，以便在屏幕上显示用户显示器可以管理的尽可能多的图像。我认为“ul”是正确的容器，显示设置为内联，我认为可以为每个元素使用表格。到目前为止，我所得到的在 Safari 中看起来很有希望(在任一维度上尺寸过小的图像都在其单元格内居中，按预期进行换行)，但在 FireFox 中失败了。它也无法通过 w3c 验证器(无文档类型)，但只要我指定文档类型，布局就会中断(列表返回到在两个浏览器中显示在单个列中)。
这是我目前所拥有的:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Layout test</title>
<style type="text/css">
#contact_sheet li {
list-style-type: none;
display: inline;
text-align: center;
}
#contact_sheet li table {
width: auto;
border-spacing: 0px;
display: inline;
border: thin solid #202020;
background-color: #404040;
color: white;
}
#contact_sheet li th {
height: 250px;
width: 250px;
text-align: center;
vertical-align: middle;
}
#contact_sheet li td {
text-align: center;
}
th img {
border: thin solid green;
}
</style>
</head>
<body>
<ul id="contact_sheet">
<li>
<table>
<tr>
<th><img src="" width="240" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" height="240" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
</ul>
</body>
</html>
我做错了什么？
最佳答案
发生这种情况是因为当特定的文档类型时，表格占据了整个页面的宽度。
只要让它们 float :左，它就会起作用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Layout test</title>
<style type="text/css">
#contact_sheet li {
list-style-type: none;
display: inline;
text-align: center;
}
#contact_sheet li table {
width: auto;
border-spacing: 0px;
display: inline;
border: thin solid #202020;
background-color: #404040;
color: white;
}
#contact_sheet li th {
height: 250px;
width: 250px;
text-align: center;
vertical-align: middle;
}
#contact_sheet li td {
text-align: center;
}
table {
float: left;
}
th img {
border: thin solid green;
}
</style>
</head>
<body>
<ul id="contact_sheet">
<li>
<table>
<tr>
<th><img src="" width="240" alt="" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" alt="" height="240" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
<li>
<table>
<tr>
<th><img src="" width="120" alt="" height="120" /></th>
</tr>
<tr>
<td>Some text</td>
</tr>
<tr>
<td><input type="checkbox" />Select</td>
</tr>
</table>
</li>
</ul>
</body>
关于list - 使用 <ul> 水平换行的 'contact sheet' View 的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4526963/