Question

我有一张代表月历的表格。在每个单元格中，我希望日期在左上角显示为数字。在右下角，我想要一个带有“+”的按钮，允许用户在当天添加内容。当单元格的高度相同时，我有这个工作，但当内容将行的高度拉伸到不同的大小时，它就会崩溃。

示例表格布局：

<table>
<tr>
    <td>
        <div>1</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
    <td>
        <div>2</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
</tr>
<tr>
    <td>
        <div>3</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
    <td>
        <div>4</div>
        <div>Content goes here.  The problem starts when there's a lot of content and the row gets stretched, the button should be in the bottom right in the other cell.</div>
        <div><input type="button" value="+" /></div>
    </td>
</tr>
<table>

为我到目前为止的地方示例CSS：

table {
    border-collapse:collapse;
    width: 300px;
}

td {
    padding: 5px;
    border: 1px solid black;
    width:50%;
    vertical-align:top;
}

td div:first-of-type {
    font-size:large;
    font-weight:bold;
    float:left;
}

td div:not(:first-of-type) {
    clear:left;
}

td div:last-of-type {
    float:right;
}

Answer 1

添加此CSS

td{
    position:relative;
}
input{
    position:absolute;
    right:0;
    bottom:0;
}

虽然你需要给你的按钮上课，否则你会影响所有输入。

这不会导致文本在它周围流动......

Answer 2

Position is your friend：

table {
    border-collapse:collapse;
    width: 300px;
}

td {
    padding: 5px;
    border: 1px solid black;
    width:50%;
    vertical-align:top;
    position:relative;
}

td div:first-of-type {
    font-size:large;
    font-weight:bold;
    position:absolute;
    top:0;
    left:0;
}

td div:not(:first-of-type) {
}

td div:last-of-type {
    position:absolute;
    bottom:0;
    right:0;
}

请注意删除浮动和添加位置的更改。

Answer 3

尝试将其绝对设置在容器的右下角。您需要使父容器相对，以便绝对正常工作。

td div:last-of-type {
    position: absolute;
    bottom: 0;
    right: 0;
}

看看这个例子：

http://jsfiddle.net/FLVh6/1/

将内容放在表格单元格的对角

3 个答案: