I'm having an alignment problem with some html I generate in a report
I have this report that I generate in an aspx page. I would like the div containing the "Answer Id:" to be at the bottom of the outlined box for each answer, regardless of how many lines the answer takes up.
I've included all the css, as an in page style, and one line of answers that demonstrates the problem fairly minimally.
<!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 na开发者_开发技巧tural 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>
If you declare the parent div (class "answerBlock") as position: relative and the child you want at the bottom (class "fieldId") as position: absolute; right: 0px; bottom: 0px and kill the height: 100% on those two classes, that should get you there.
The simplest way would be to just add another row at the bottom
加载中,请稍侯......
精彩评论