0

我需要制作这样的页面（任务） 在此处输入图像描述

但我的页面看起来像这样。 在此处输入图像描述

第二个单元格中的元素与单元格 1 和单元格 3 中的元素不在同一级别。此外，页面上的两个按钮也不在同一级别 - 带有价格的按钮略高于带有文本的按钮。 如何解决这个问题呢？

我表格中的每个单元格都像这样

<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

变化

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

    button.price, button.order {
       position: absolute;
       bottom: 3px;
    }

    button.price {
        left: 20px;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b5b4b3), color-stop(1, #141414) );
        background:-moz-linear-gradient( center top, #b5b4b3 5%, #141414 100% );
        background-color:#b5b4b3;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        border-bottom-right-radius:20px;
        border-bottom-left-radius:20px;
        text-indent:-11.25px;
        border:1px solid #ded5de;
        display:inline-block;
        color:#ffffff;
        font-family:Courier New;
        font-size:15px;
        /*font-weight:bold;*/
        font-style:normal;
        height:25px;
        line-height:25px;
        width:75px;
        text-decoration:none;
        text-align:center;
        pointer-events:none;

    }

    button.order {
        right: 20px;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #bfbfbf) );
        background:-moz-linear-gradient( center top, #ffffff 5%, #bfbfbf 100% );
        background-color:#ffffff;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        border-bottom-right-radius:20px;
        border-bottom-left-radius:20px;
        text-indent:0px;
        border:1px solid #ffffff;
        display:inline-block;
        color:#db1818;
        font-family:Courier New;
        font-size:12px;
        font-weight:bold;
        font-style:normal;
        height:25px;
        line-height:25px;
        width:84px;
        text-decoration:none;
        text-align:center;
        margin-left: -18pt;
       margin-top: 50pt;

}
于 2013-10-06T12:54:19.517 回答
1

其他答案不正确。您不能在表格单元格中使用定位。所以位置：相对；对于 td 是不可能的！因此，您无法使用表格和相对位置归档您想要的内容。

选项1：

用 div 将按钮上方的内容包裹起来，并给它一个固定的高度。然后你可以保证按钮在同一个位置。tds 需要垂直对齐：顶部；在顶部对齐内容。

选项 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

尝试添加valign="top"到您td的 's，然后使用 css 将您的按钮放置在单元格的底部position:)

于 2013-10-06T12:44:43.543 回答
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 回答