10

最近リリースされた MDL キットを試して、カードとテーブルでグリッド レイアウトを使用しようとしています。

私が見つけたのは、MDL グリッドは、ネストされた列の Bootstrap グリッドほど柔軟ではないということでした (おそらく、まだ十分にわかっていないからです)。そのため、私の 3 列のレイアウトでは、カードとテーブルを並べて使用して、持っているデータを表示しています。

残念ながら、手動で width=100% を適用しない限り、カードは列の幅全体には及びません。しかし、私がそれを行うとすぐに、テーブルは応答しなくなり、画面サイズが縮小すると周りのカードと重なります.

JSFiddle

この問題を解決する方法を誰か教えてください。

<body>
    <main class="mdl-layout__content">
    <div class="page-content">
        <div class="demo-grid-1 mdl-grid">
            <div class="mdl-cell mdl-cell--4-col ">
                <div class="mdl-card mdl-shadow--4dp demo-card-wide">
                    <div class="mdl-card__media">
                        <img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
                    </div>
                    <div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
                    <div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col">
                <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
                    <thead>
                        <tr>
                            <th class="mdl-data-table__cell--non-numeric">Material</th>
                            <th>Quantity</th>
                            <th>Unit price</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
                            <td>25</td>
                            <td>$2.90</td>
                        </tr>
                        <tr>
                            <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
                            <td>50</td>
                            <td>$1.25</td>
                        </tr>
                        <tr>
                            <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
                            <td>10</td>
                            <td>$2.35</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mdl-cell mdl-cell--4-col">
                <div class="mdl-card mdl-shadow--2dp demo-card-wide">
                    <div class="mdl-card__title">
                         <h2 class="mdl-card__title-text">Welcome</h2>

                    </div>
                    <div class="mdl-card__supporting-text">
                        <div class="demo-grid-1 mdl-grid">
                            <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
                            <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
                            <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
                            <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
4

3 に答える 3

8

それぞれの問題についてお手伝いできるかどうか見てみましょう。

まず、列全体を占めていないカード。問題は、ネストされた div です。次のように列を作成する場合：

<div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">

カードを列内に置くのではなく、列全体を占めます。ここで更新された JSFiddle を参照してください。

次に、ネストされた列の場合、次のようにネストされたグリッドが必要です。

<main class="mdl-layout__content">
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
            <div class="mdl-card__supporting-text">
                <main class="mdl-layout__content">
                    <div class="mdl-grid">
                        <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">

ここで JSFiddle を参照してください。

目標を少し変更したように聞こえますが、問題を解決するためにこれら 2 つを組み合わせることができれば幸いです。

于 2015-07-14T16:46:38.983 に答える