个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试生成一个 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/
24
4
0
我正在开发一个应用程序，我在其中显示来自服务器的一些联系人，目前我正在对来自服务器的联系人进行排序，但现在我想使用 IOS -> 设置 -> 联系人 -> 显示顺序读取联系人设置新的联系人框架，我没有
我希望检测一个(球)何时接触另一个物体(目标)，并且我希望知道该接触的冲动。 我知道三种检测联系人的方法 gContactAddedCallback 或 int numManifolds =
我正在开发我的第一个 Android 应用程序，想知道我可以调用什么来显示这个“联系人 Pane ”: 当然，我指的是下方带有联系人照片、姓名和操作图标的小 Pane 。 作为一个相关问题...这个小
我正在研究如何从 android 上的联系人列表中导入数据。在模拟器中，我注意到一个位于顶部的联系人组，其中只包含一个我自己的联系人。其余联系人如下。 但是，当我使用下面的代码时 Intent pic
如何添加从地址簿/联系人列表导入联系人号码并将其添加到数组中的功能？ 编辑 如果您看过高级通话管理器应用程序，它允许您从联系人列表中选择联系人并将其添加到黑名单。我想做同样的事情，从联系人列表中选择一
我正在阅读有关内容提供商的信息，并且对从 android 中选择联系人有点困惑。我从 Stackoverflow 中阅读了很多示例，并且混淆了一些人正在使用 content://contacts/pe
.NET 有许多不同的 Google API dll，例如 Google.Apis.Calendar.v3。但联系人 API 没有任何内容。使用旧版本或其他方法并不是解决方案，因为我已经使用了多个 A
我收到此错误 django.urls.exceptions.NoReverseMatch:未找到“联系人”的反向。 “contact”不是有效的 View 函数或模式名称。我可能做错了什么，djang
每当我使用 Google Contacts Api v3 列出我的联系人时，查询都会返回 480 个结果，而我在我的联系人上只有 269 个联系人列表。 我正在尝试过滤它们，以便它只显示来自我的联系人
我正在使用 django 1.3.1 和 satchmo 0.9.2。我使用了 Satchmo 附带的默认模型，称为“Contact”。我创建了一个 satchmo_mod 应用程序和一个 admin
当我使用“这个解决方案”时，我得到一个空白的联系人数组。 我在 examples/contacts 文件夹中使用“google-api-php-client-0.6.7”和 serviceAccoun
使用 ABAddressBook，当我希望用户能够为他们以前从未见过的联系人选择“创建新联系人”和“添加到现有联系人”选项时，我会创建并显示一个 ABUnknownPersonViewControll
我正在探索 ionic 4 中的新导航(类型为 angular)，您可以在选项卡项目中找到它 href="/tabs/(contact:contact)" 什么是 (contact:contact)
我已经使用这个 API 6 年了，没有任何问题，但是从 3 天前开始，我遇到了一系列奇怪的行为，意识到我的 google 联系人开始不受控制地复制。我发现它与检索联系人时 1.500 的奇怪限制有关，
我在 main 中初始化了 box 数据库如下 void main() async { WidgetsFlutterBinding.ensureInitialized(); final
我使用 var contacts:[details] 编写代码？ = nil 我遇到了无法访问 contacts?.count 的问题，我不得不在任何地方使用可选值。例如 contacts[index
我正在从我的手机联系人列表中获取我的联系人图像 uri。 但是，当我尝试将图像 uri 转换为位图时，我收到错误: java.io.FileNotFoundException: content://c
我浏览了很多帖子，但没有找到任何有效甚至正确回答问题的答案。我最接近的是这个 How to avoid duplicate contact name (data ) while loading con
我正在使用 Google Contact API v3。目标是在我的数据库和 Google 帐户之间同步联系人。我的问题是: 1) 当我在没有联系人组的情况下通过电子邮件地址搜索联系人时，我得到了一个
我想在联系表单 7 中的特定输入类型上添加 Id 和 Class 属性。 当我添加以下示例时，它在输入类型上方的 SPAN 标记上应用 Id 和 Class [radio amount id:amou
我是一名优秀的程序员,十分优秀！