1

モバイル ビュー ポートのテーブル構造を修正しようとしています (私のものではない厄介なコードですが、追加のクラスを追加せずに修正する必要があります)。

以下でシナリオを説明しようとしました。その下にコードを示します。これで十分であることを願っています。それ以外の場合は、追加のコードを挿入します。

これは、ビューポートに追加の css がない場合の外観です。

 _________________
|    |            |
| av |  text      |
|____|____________|
|    |            |
| av |  username  |
|____|____________|

これは私のcssでどのように見えるかです:

 ______
|      |          
| text |          
|______|__________
|_av|  |          |
       |          |
       | username |
       |__________|

これは私がそれをどのように見せたいかです:

 _________________
|                 |
|      text       |
|_________________|
|    |            |
| av |  username  |
|____|____________|

av = アバター

html:

  <div class="row-fluid post-comment">      
    <div class="span6 offset3 margin-small">
        <table class="table table-condensed no-table-border">
            <tbody>
                <tr>
                    <td class="avatar">
                        <img src="http://placehold.it/40x40" class="img-circle">                            
                    </td>
                    <td class="text">
                        <p>text...</p>
                    </td>
                </tr>
                <tr class="user-card">
                    <td rowspan="2" class="avatar">
                        <img src="http://placehold.it/50x50" class="img-circle">                            
                    </td>
                    <td rowspan="2" class="username">
                        // content
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

CSS:

.post-comment .span6 td.avatar {
    display: none;
}

.post-comment .span6 .user-card td.avatar {
    display: block;
}
4

2 に答える 2

1

追加のクラスは許可されていないため、HTML の編集も許可されていないと推測しています。

私はそれを機能させるための本当に汚い方法を見つけました:

.post-comment .span6 td.avatar {
    display: none;
}
.post-comment .span6 table {
    width: 120px;
    border-spacing: 0;
}
.post-comment .span6 table td {
    margin: 0;
    padding: 0;
    background: lightblue;
}
.post-comment .span6 td.text {
    display: block;
    position: absolute;
    width: 120px;
}

.post-comment .span6 .user-card td.avatar,
.post-comment .span6 .user-card td.username{
    display: table-cell;
    padding-top: 55px;
}

.texttable-cell は、他のセルの上に絶対ブロックとして表示されます。セルが.textpadding-top の下に表示されるようにします。

私が言ったように、汚い方法ですが、うまくいきます。

于 2013-09-20T10:32:41.123 に答える
0

2 番目の TR では、すべての TD に rowspan="2" があります。それを削除します。あなたの最初の TR には 2 つの TD しかありません。その後、期待どおりに動作するはずです。

于 2013-09-20T10:11:19.500 に答える