Question

我需要制作这样的页面（任务） enter image description here

但我的页面看起来像这样。 enter image description here

第二个单元格中的元素与单元格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/ 还有如何在单元格之间设置空间？

Answer 1

垂直对齐顶部是您正在寻找的

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

按钮将需要定位以使它们保持在同一水平，例如位置绝对

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

Answer 2

尝试将valign="top"添加到td，然后使用css position将按钮放在单元格的底部：）

Answer 3

也许这对您有用：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;
}

Answer 4

更改

   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;

}

Answer 5

其他答案不正确。您不能在表格单元格中使用定位。 所以位置：相对;因为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/

我唯一的问题是你必须为行设置一个固定的高度。我不确切知道你的情况，但可能没问题。

表格单元格中的元素不在同一级别

5 个答案: