我不太熟悉 CSS 规则。我正在寻找负责使表格中的元素彼此保持一致的行为,如下所示:
看看添加到购物车按钮是如何正确排列的?例如,在我的网站上,当我增加产品名称文本的长度时,它会将“添加到购物车”按钮向下移动,从而降低样式的吸引力。
应用了哪些规则来使它们保持一致,就像这样?
编辑:这个示例具体来自 Magento 1.9 的演示安装,我找不到直接链接,但您可以通过以下方式访问它:
- > http://installatron.com/magento/demo
- 点击店员
- 点击新品
代码实际上包含在一个包含列表的 div 元素中。类名是 product-grid first last odd
。
最佳答案
这是它如何工作的一个非常快速、基本的片段。
编辑
更改了 OP 问题的代码。按需工作。
.item_img {
width: 100px;
height: 120px;
background: red;
}
.item_text {
max-width: 100px;
vertical-align: text-top;
}
table, tr, td {
border: 1px solid black;
border-collapse: collapsed;
}
<table>
<tr>
<td class="item_img"></td>
<td class="item_img"></td>
</tr>
<tr>
<td class="item_text">Item Text</td>
<td class="item_text">Item textItem textItem textItem textItem textItem textItem textItem textItem textItem textItem text</td>
</tr>
<tr>
<td><button>Add</button></td>
<td><button>Add</button></td>
</tr>
</table>
关于html - 使文本元素彼此保持一致的CSS规则?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27061733/