Question

我正在尝试使用纯HTML和CSS构建简历，并希望尽可能保持干净。在this fiddle中，我构建了我想要实现的布局。

这显然不是最漂亮的解决方案，因为如果条目“语言”更长，它就会中断。

Rowspan有点清洁，但会出现两个问题：

首先，每当我向列表中添加一个新条目时，我都必须增加colspan（我不想使用任何脚本，KISS）。

其次，更令人担忧的是，td:first-child选择器不考虑行数。可以在this fiddle

中看到残骸

我尝试过的另一种方法是使用<ul>然后使用ul:before选择器在前面加上灰线和“语言”文本。系统会显示新的挑战：在此伪元素上设置content会将置于 <ul>之上。

您认为处理这种情况最干净，最精简的方式是什么？

Answer 1

如何使用divs和float制作两列？您可以在右侧放置任何您想要的内容，表格，ul，任何内容。

<强> HTML

<div id="resume">
    <div class="category">Skills</div>
    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>

    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>

    <div class="category">Skills</div>
    <div class="left">Languages</div>
    <div class="right">asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /> asfd<br /></div>
    <div class="divider"></div>
</div>

<强> CSS

.divider {
    clear: both;
    padding-bottom: 10px;
}

.category{
    padding-left: 100px;
    font-weight: bold;
}

.left {
    float: left;
    width: 100px;
}
.right {
    float: left;
}

DEMO

在不使用rowspan的情况下创建语义正确的表

1 个答案: