0
aspx 페이지에서 생성하는 리포트가 있습니다. "Answer Id :"가 포함 된 div는 답변의 줄 수에 관계없이 각 대답의 윤곽선이있는 상자의 맨 아래에 있어야합니다.리포트에서 생성하는 일부 html에 정렬 문제가 있습니다.
나는 모든 페이지 스타일에 같은 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>
+1 및 AP div에 대한 공간을 허용하기 위해 부모의 바닥에 약간의 패딩 – clairesuzy
div.answerBlock의 높이가 다른 답변과 독립적으로 달라 지므로 원하는 결과를 얻지 못했습니다. – Felan
문제가 있습니다 - div.answerBlock에 'height : 100 %'를 설정하려면 부모 (td.answerBlock)의 높이를 설정해야합니다 (현재 100 %로 설정되어있어 아무 것도하지 않습니다) . 따라서 td.answerBlock에 높이를 지정하고 div.fieldID에서 높이를 제거한 다음 위의 위치를 변경해야합니다. –