当前位置：文江博客话题详情

使用div结构创建表

发布于 2024-10-08 08:15:05 字数 317 浏览 0 评论 0原文

我正在尝试完成这种布局。

alt text

请注意文本如何始终垂直居中。我想使用 div 的垂直对齐来实现这一点。

注意：块没有特定的高度。使用 top:50% 等属性或定位无法实现精确居中。

http://jsfiddle.net/V8S8b/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终遇你 2024-10-15 08:15:05

问题是图像。解决方法是将图像和文本内容分成两个单独的“单元格”，这将正确确定对齐方式。这是示例 - 我必须为容器设置一些宽度，但因为它们充当表格单元格他们会根据内容进行调整（正如我试图证明的那样）

回复收藏 0 原文

沒落の蓅哖 2024-10-15 08:15:05

.ul.entries li {
    display:table-row;
    padding:8px;
    border-bottom:1px solid #000;
}

你这里有一个错误。 ul 前面不应有点，因为它不是一个类。其余看起来不错。

.ul.entries li {
    display:table-row;
    padding:8px;
    border-bottom:1px solid #000;
}

You have an error here. ul should not be preceded by dot since its not a class .Rest looks fine.

回复收藏 0 原文

一杆小烟枪 2024-10-15 08:15:05

尝试以下操作，我编辑了您上面提供的 jsfiddle 链接，并设法获得与上面包含的图片类似的布局。

h1 {
    display: inline-block;
    font-size:18px;
    font-weight:bold;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

ul.entries {
    width:500px;
}

ul.entries li {
    margin: 10px;
    border-bottom:1px solid #000;
}

.inner {
    overflow: hidden;
    padding: 10px;
}

ul.entries li img {
    float:left;
    margin-right:15px;
    display: inline;
}

Try the following, I edited the jsfiddle link you gave above and managed to get a similar layout to the picture you included above.

h1 {
    display: inline-block;
    font-size:18px;
    font-weight:bold;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
}

ul.entries {
    width:500px;
}

ul.entries li {
    margin: 10px;
    border-bottom:1px solid #000;
}

.inner {
    overflow: hidden;
    padding: 10px;
}

ul.entries li img {
    float:left;
    margin-right:15px;
    display: inline;
}

回复收藏 0 原文

~没有更多了~