Question

我有这个报告，我在aspx页面中生成。我希望包含“答案ID：”的div位于每个答案的勾勒框的底部，无论答案占用多少行。

rowOfAnswers

我已将所有css包含在页面样式中，以及一行答案，这些答案相当简单地说明了问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Page</title>
    <style type="text/css">
body 
{
}
table
{
    font-size: smaller;
    width: 100%;
}
.alignTop
{
    vertical-align: top;
    text-align: center;
}
.userInfo
{
}
.selectUserListBoxDiv
{
    float: left;
    margin: 0 2em 0 2em;
}
.nameFilterClass
{
    color: Blue;
}
.reportDiv
{
    margin-top: 2em;
}
.versionId
{
    font-size: xx-small;
}
.testList
{
    float: left;
    width: 29%;
    border: thin black solid;
}
.questionList
{
    margin-left: 30%;
    width: 69%;
    border: thin black solid;
}
.topSpacer
{
    margin-top: 1em;
}
.bottomSpacer
{
    margin-bottom: 1em;
}
.fieldName
{
    font-weight: bold;
}
.fieldId
{
    font-size: xx-small;
    color:#888;
    text-align: right;
    vertical-align: bottom;
    height: 100%;
}
.fieldValue
{
    padding-left: 1em;
}
td.testDate
{
    text-align: left;
    background-color:#dddddd;
    border-top-style: double;
}
th.testDate
{
    background-color:#dddddd
}
.empAnswerField
{
    float:left;
}
td .empAnswerField
{
}
.answerFields
{
}
.selectAllLabel
{
}
td.actionCheckBoxTd, th.actionCheckBoxTh
{
    text-align: center;
}
.correct
{
    color:green;
}
.incorrect
{
    color: red;
}
.isCorrectField
{
    float: right;
}
.isCorrectField.incorrect
{
    display: none;
}
td .isCorrectField
{
}
.answerText
{
    margin-top: 1.25em;
    height: 100%;
}
th .answerText
{
    margin-top: 3.25em;
    width: 100%;
}
td.answerBlock
{
    width: 25%;
    border: thin black solid;
    vertical-align: text-top;
    height: 100%;
}
div.answerBlock
{
    margin-top: 2px;
    padding: 3px 3px 3px 3px;
    height: 100%;
}
.alternate
{
    background-color: #eef;
}
.bottomborder
{
    border-bottom: 1px black dotted;
    text-align: left;
}
.printOnly
{
    visibility: collapse;
}
@media print
{
    .noPrint
    {
        display: none;
        height: 0;
        width: 0;
    }
    .printOnly
    {
        visibility: visible;
    }
    .testList
    {
        width: 100%;
        float: none;
        margin: 0;

    }
    .questionList
    {
        margin: 0;
        width: 100%;
        float: none;
    }
}   
    </style>
</head>
<body>
    <table>
        <thead>
        </thead>
        <tbody>
            <tr>
                <td class="answerBlock">
                    <div class="answerBlock">
                        <div class="answerFields">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_empAnswerFieldLabel_0"
                                class="empAnswerField"></span><span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_isCorrectFieldLabel_0"
                                    class="isCorrectField incorrect">Incorrect Answer</span>
                        </div>
                        <div class="answerText">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerTextLabel_0">
                                A number pulled out of the air and used just to mathematically sketch out a hypothetical.</span>
                        </div>
                        <div class="fieldId">
                            Answer Id: <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerIdLabel_0">
                                16.16</span>
                        </div>
                    </div>
                </td>
                <td class="answerBlock">
                    <div class="answerBlock">
                        <div class="answerFields">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_empAnswerFieldLabel_1"
                                class="empAnswerField correct">Employee Answer</span> <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_isCorrectFieldLabel_1"
                                    class="isCorrectField correct">Correct Answer</span>
                        </div>
                        <div class="answerText">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerTextLabel_1">
                                The square root of negative one.</span>
                        </div>
                        <div class="fieldId">
                            Answer Id: <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerIdLabel_1">
                                17.17</span>
                        </div>
                    </div>
                </td>
                <td class="answerBlock">
                    <div class="answerBlock">
                        <div class="answerFields">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_empAnswerFieldLabel_2"
                                class="empAnswerField"></span><span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_isCorrectFieldLabel_2"
                                    class="isCorrectField incorrect">Incorrect Answer</span>
                        </div>
                        <div class="answerText">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerTextLabel_2">
                                A number that hasn't been communicated yet.</span>
                        </div>
                        <div class="fieldId">
                            Answer Id: <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerIdLabel_2">
                                18.18</span>
                        </div>
                    </div>
                </td>
                <td class="answerBlock">
                    <div class="answerBlock">
                        <div class="answerFields">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_empAnswerFieldLabel_3"
                                class="empAnswerField"></span><span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_isCorrectFieldLabel_3"
                                    class="isCorrectField incorrect">Incorrect Answer</span>
                        </div>
                        <div class="answerText">
                            <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerTextLabel_3">
                                The natural log of pi.</span>
                        </div>
                        <div class="fieldId">
                            Answer Id: <span id="ContentPlaceHolder1_quizListView_questionListView_3_answerListView_2_answerIdLabel_3">
                                19.19</span>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

如果您将父div（类“answerBlock”）声明为position: relative，将底部所需的子项（类“fieldId”）声明为position: absolute; right: 0px; bottom: 0px并将height: 100%声明为{{1}}那两个班，应该让你到那里。

Answer 2

最简单的方法是在底部添加另一行

我在报告中生成了一些html的对齐问题

2 个答案: