2

純粋なHTMLとCSSを使用して履歴書を作成しようとしていますが、可能な限りクリーンな状態に保ちたいと考えています。このフィドルでは、実現したいレイアウトを作成しました。

「Languages」というエントリがはるかに長いと壊れてしまうため、これは明らかに最も美しい解決策ではありません。

Rowspanは少しクリーンですが、2つの問題が発生します。

まず、リストに新しいエントリを追加するたびに、colspanをインクリメントする必要があります（スクリプトを使用したくない、KISS）。

第二に、そしてもっと心配なことに、td:first-childセレクターは行スパンを考慮しません。残骸はこのフィドルで見ることができます

私が試したもう1つのアプローチは、を使用してからセレクターを使用して、ブロックの前に灰色の線と「言語」テキストを追加することです<ul>。ul:before新しい課題が表示されます。contentこの疑似要素に設定すると、上に配置され<ul>ます。

この状況に対処するための最もクリーンで無駄のない方法は何だと思いますか？

4

1 に答える 1

1

divsとを使用floatして 2 つの列を作成するにはどうすればよいでしょうか。右側、テーブル、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;
}

デモ

于 2012-07-03T19:54:56.740 に答える