0

このようなページを作成する必要があります (タスク) ここに画像の説明を入力

しかし、私のページはこのように見えます。 ここに画像の説明を入力

2 番目のセルの要素は、セル 1 およびセル 3 の要素と同じレベルではありません。また、ページ上の 2 つのボタンも同じレベルではありません。価格のボタンは、テキストのボタンよりも少し高くなります。 この問題を解決するには？

テーブルのすべてのセルは次のようになります

<td id="cell2">
            <img src="pic2.png">
            <p class="specs">
                 Тип: Светильник потолочный<br>
                 Фабрика: ST Luce<br>
                 Страна: Италия<br>
                </p>
                <p class="desc">
                    Светильник потолочный ST Luce<br> серии SL600,<br> артикул SL600.542.05
                </p>
                <button class="price">6784р</button>
                <button class="order">Заказать</button>
    </td>

フィドルへのリンク http://jsfiddle.net/dNfvz/1/ また、セル間にスペースを設定する方法は?

4

5 に答える 5

2

垂直方向の上揃えは、あなたが探しているものです

table td {
    border: 2px solid #A09A82;
    padding: 5px 5px;
    vertical-align:top; //add this
}

ボタンを同じレベルに保つには、ボタンを配置する必要があります。たとえば、絶対位置を使用します。

http://jsfiddle.net/dNfvz/3/

于 2013-10-06T12:48:01.710 に答える
1

他の答えは正しくありません。表のセルでは配置を使用できません。だから位置：相対的。tdは不可能です！そのため、テーブルと相対位置で必要なものをアーカイブすることはできません。

オプション1：

ボタンの上のコンテンツを div で囲み、高さを固定します。次に、ボタンが同じ位置にあることを保証できます。TDS には vertical-align: top; が必要です。コンテンツを上に揃えます。

オプション 2:

私は個人的にテーブルが好きではないので、それらを取り除こうとしました。私はあなたのコードで例を作りました。

<body>
<div id="container">
    <div id="table">
        <div>
            <div id="cell1">
                <div class="cell_wrap">
                    <img src="pic1.png" />
                    <p class="specs">Тип: Спот
                        <br/>Фабрика: Novotech
                        <br/>Страна: Венгрия
                        <br/>
                    </p>
                    <p class="desc">Спот Novotech серии Crystal-LED,
                        <br/>артикул 357012</p>
                    <div class="button_wrap">
                        <button class="price">735р</button>
                        <button class="order">Заказать</button>
                    </div>
                </div>
            </div>
            <div id="cell2">
                <img src="pic2.png" />
                <p class="specs">Тип: Светильник потолочный
                    <br/>Фабрика: ST Luce
                    <br/>Страна: Италия
                    <br/>
                </p>
                <p class="desc">Светильник потолочный ST Luce
                    <br/>серии SL600,
                    <br/>артикул SL600.542.05</p>
                <div class="button_wrap">
                    <button class="price">735р</button>
                    <button class="order">Заказать</button>
                </div>
            </div>
            <div id="cell3">
                <img src="pic3.png" />
                <p class="specs">Тип: Подвес
                    <br/>Фабрика: ArteLamp
                    <br/>Страна: Италия
                    <br/>
                </p>
                <p class="desc">Подвес ArteLamp серии JERSEY,
                    <br/>артикул A8543LM-6GO</p>
                <div class="button_wrap">
                    <button class="price">735р</button>
                    <button class="order">Заказать</button>
                </div>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/Qd48A/

私がまだ抱えている唯一の問題は、行の高さを固定する必要があることです。あなたの状況は正確にはわかりませんが、おそらく問題はないでしょう。

于 2013-10-06T13:05:44.410 に答える
1

多分これはあなたのために働くでしょう：http://jsfiddle.net/dNfvz/2/

<!-- HTML -->
<div class="action">
    <button class="price">735р</button>
    <button class="order">Заказать</button>
</div>

/** CSS **/
table td {
    border: 2px solid #A09A82;
    padding: 5px 5px 50px;
    position: relative;
}

div.action {
    position: absolute;
    bottom: 10px;
}
于 2013-10-06T12:49:27.137 に答える
1

に追加valign="top"してからtd、css を使用してボタンをセルの下部に配置してみてくださいposition:)

于 2013-10-06T12:44:43.543 に答える