0

複雑なレコードのリストを表示したいのですが、単純にテーブルに収めようとしてもうまくいきません。

次のようなレイアウトが必要です。

モックアップ

<div>各レコード全体をテーブル セル (行ごとに 1 つのセル) に配置し、各セル内でタグを使用できます。表のセルに div を配置すると、表示の問題が発生する可能性がありますか? とにかくdivで簡単にできるので、おそらくそれは悪い考えです。

各レコード内には、かなりの数のコンポーネントがあります。これらを div でレイアウトする場合、各ラベル/値のペアが正しい位置にあることを確認するにはどうすればよいですか? または、一貫したレイアウトを確保するためのより良い方法はありますか?

明らかに、各レコードの値は異なるため、一貫した外観を維持するには、ラベルをすべて垂直に並べる必要があります。

質問が少し曖昧に思える場合は、それを行う方法についての私の理解があいまいであるためです...質問を明確にする助けさえあれば素晴らしいでしょう!

4

3 に答える 3

2

表のセルで div を使用しても問題ありません。問題を引き起こすべきではありません。

あなたのモックアップを見ても、意味的にはテーブルではないと思います。列、列見出しなどはありません。

詳細が記載されたアイテムのリストのように見えます。

li と div を内部に含む ul を使用して、さらにレイアウトします。

また、ID をそのように正確に配置する必要がある場合は、各 li 内で凡例要素を使用できます。

于 2012-06-11T23:41:30.160 に答える
1

このようなものはどうですか。

HTML

<div>
    <span class="label">ID 345</span>
<table>
<tr>
    <td class="desc" colspan="3">A fairly long description that takes up basically the entire width of the section, maybe even longer still</td>
    <td rowspan="3" class="doStuff">Do Something<br />Do another thing<br />Maybe 1 more thing</td>
</tr>
<tr>
    <td class="author"colspan="2"><span>Author: </span>Joe Bloggs</td>
    <td class="created"><span>Created: </span>19th June 2012</td>
</tr>
<tr>
    <td class="label3"><span>Label 3: </span>Value</td>
    <td class="label4"><span>Label 4: </span>Value</td>
    <td class="label5"><span>Label 5: </span>Value</td>
</tr>
</table>
</div>​

CSS

div{
    margin:17px 10px;
    border:2px solid #000;
}
span.label{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-10px;
    left:5px;
}
table{
    width:100%;
}
tr{
    background:#ccc;
}
td{
    padding:5px 7px;
}
span{
    font-weight:bold;
}

jsFiddle - http://jsfiddle.net/QActK/

于 2012-06-12T04:53:28.817 に答える
1

HTML 5 を見ている場合、article タグがここに収まる可能性があります。あなたが「著者要素」を持っているという事実は、それをうまく適合させているようです. HTML 5 を見ていない場合は、 のdiv代わりにa を使用してarticleください。または、@Moin Zaman が言及したように、以下の例では useulと use liin place を使用しarticleます。

ラベルなどが垂直に並ぶようにすることに関しては、これはかなり簡単に達成できます。css で幅を明示的に設定するだけです。

簡単な例を次に示します。

HTML

<article>
    <h2>ID: 123</h2>
    <div class="actions">
        <input type="button" value="Do Someting" />  
        <input type="button" value="Do Someting Else" />  
        <input type="button" value="And Maybe something Else" />  
    </div>
    <div class="description">A fairly long description that takes up basically the entire width of the section, maybe even longer still</div>
    <div class="details">
        <div class="author"><span>Author:</span>Douglas Adams</div>
        <div class="created"><span>Created:</span>1 Jan 2012</div>
        <div class="label first"><span>Label 1:</span>Value</div>
        <div class="label"><span>Label 2:</span>Value</div>
        <div class="label"><span>Label 3:</span>Value</div>
        <div style="clear:both; line-height:0px;">&nbsp;</div><!-- Use A Clear Fix Instead of this, I got Lazy!! -->
    </div>
</article>

CSS

article
{
    border: solid 2px black;
    margin:20px;
    padding:5px;
    position:relative;
}

article h2
{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-15px;
    left:5px;
    display:inline;
}

article .actions
{
    float:right;
    width:25%;
    text-align:right;    
    position:relative;
}

article .actions input
{
    display:block;
    float:right;
    clear:both;
}

article .details
{
    position:releative;
    width:70%;
}

.author
{
    float:left;
    width:60%;
}

.created
{
    float:left;
    width:40%
}

.label
{
    float:left;
    width:30%;    
}    


.label span, .author span, .created span
{
    font-weight:bold;
    padding-right:3px;
}

このフィドルを参照してください

注:クリア div を使用する代わりに、クリア フィックスを使用してください。

于 2012-06-12T04:17:46.590 に答える