나는 내부에 표가있는 HTML 양식을 가지고 있습니다. 다음과 같이 코드는 다음과 같습니다문서의 적절한 CSS 위치 지정
내 코드 : 제가 포함 된 태그처럼 이동하는 테이블을 만들려고 해요
<html>
<head></head>
<body>
<form onsubmit="" id="form1" action="" method="post" name="form1" style="position: relative; background-color: green;">
<table style="width: 908px; background-color: yellow; position: absolute; left: 350px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
</tr>
</tbody>
</table>
<input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">
</form>
</body>
</html>
this 튜토리얼 사이트에 주어진 예에서와.
예제 코드 : 다음과 같이 내가 모방하기 위해 노력하고있어 특정 예제의 코드는
<html>
<head>
<style type="text/css" media="screen">
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example {
float:right;
}
#example div {
}
#div-before, #div-after {
background-color:#88d;
color:#000;
}
#div-1 {
width:400px;
background-color:#000;
color:#fff;
}
#div-1-padding {
padding:10px;
}
#div-1a {
background-color:#d33;
color:#fff;
}
#div-1b {
background-color:#3d3;
color:#fff;
}
#div-1c {
background-color:#33d;
color:#fff;
}
#example div p {
margin:0 .25em;
padding:.25em 0;
}
#description {
float:left;
width:40%;
}
pre {
padding:1em;
border:1px dashed #aaa;
background:#fafafa;
}
p {
margin:0.5em 0;
}
h3 {
color:#999;
}
.job {
margin-top:1em;
border:1px solid #aaa;
padding:1em;
background:#ddd;
}
</style>
</head>
<body>
<div id="example">
<div id="div-before">
<p>id = div-before</p>
</div>
<div id="div-1">
<div id="div-1-padding">
<p>id = div-1</p>
<div id="div-1a">
<p>id = div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div id="div-1b">
<p>id = div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div id="div-1c"><p>id = div-1c</p></div>
</div></div><!-- /id=div-1-padding /id=div-1 -->
<div id="div-after">
<p>id = div-after</p>
</div>
</div><!-- /id=example -->
</body>
</html>
내가 달성하기 위해 노력하고있어 설명하기를, 통지 방법은 크기를 다시 할 때 브라우저를 더 작게 만들려면 예제 코드의 기본 div 및 해당 하위 항목은 브라우저와 함께 이동하지만 더 이상 브라우저 창에 맞지 않으면 비율로 유지됩니다. 내 코드을 사용하면 브라우저의 크기를 조정하더라도 양식의 하위 항목 즉 내부 테이블이 동일한 자리에 남아 있습니다. 예제처럼 움직이기를 원합니다. 직관적으로 테이블이 폼에 임베딩되어 있기 때문에 폼 내에 절대적으로 배치되었지만 부모 요소 만 상대적인 위치에 있기 때문에 이동해야한다는 것을 알기 때문에 혼란 스럽습니다. 브라우저 창 내가 빠진 것이 있습니까?
참고 :
이 내 코드에, 혼란을 방지하기 위해, 나는 단지 그들이 무시할 수 내 개인 참조 용 배경 색상을 추가했다.
UPDATE : EXAMPLE DEMO, MY CODE DEMO
UPDATE (솔루션) :
여기에 각 페이지의 데모에 대한 링크입니다 좋아, 나는 그것을 해결할 수 있었다. 내가 한 일은 div 태그에 전체 양식을 포장하고 다음 스타일을 부여했습니다. position: relative; background-color: green; width: 910px; margin: 0px auto;. 또한 양식 스타일을 제거하고 테이블 스타일을 다음과 같이 변경했습니다. width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;. 이렇게하면 모든 것이 가운데로 이동하고 예제 코드에 설명 된 동작이 반영됩니다. 나중에 참조 할 수 있도록 수정 된 코드가 있습니다. 여전히 궁금해하지만 스타일이 양식에 적용될 때 왜이 기능이 작동하지 않을까요 ?? div와 form 태그 사이에서 스타일이 어떻게 처리되는지에 근본적인 차이가 있습니까 ??? 모든 제안을 주셔서 감사합니다.
<html>
<head></head>
<body>
<div style="position: relative; background-color: green; width: 610px; margin: 0px auto;">
<form onsubmit="" id="form1" action="" method="post" name="form1">
<table style="width: 908px; background-color: yellow; position: absolute; left: 0px; top: 350px;" border="0">
<tbody><tr>
<td colspan="3" align="center"><span style="color: Red; font-size: medium;" id="error"><br></span></td>
</tr><tr>
<td style="width: 300px;" align="right"><input style="font-size: medium; width: 35%;" tabindex="-1" id="btnReset" onclick="" value="Reset" name="btnReset" type="button"></td><td style="width: 300px;" align="center"><img style="border-width: 0px;" src=""></td><td style="width: 300px;" align="left"><input style="font-size: medium; width: 35%;" id="btnNext" onclick="" value="Next" name="btnNext" type="submit"></td>
</tr><tr>
<td></td><td style="width: 34%;" align="center">For assistance please see <a href="">Help</a> page<br><br></td><td></td>
</tr>
</tbody>
</table>
<input value="" id="StoredProcedure" name="StoredProcedure" type="hidden"><input value="False" id="SubmitFile" name="SubmitFile" type="hidden"><input value="False" id="" name="" type=""><input value="" id="" name="" type="hidden"><input value="False" id="" name="" type="hidden">
</form>
</div>
</body>
</html>
실제 예제를 볼 수 있습니까? 코드에서 알기가 정말 어렵습니다. 특히 브라우저가 css로 이상한 것을하는 것처럼. –
문제 없습니다. JSFiddle.com의 데모 링크를 추가했습니다. – kingrichard2005
질문이 없습니다. 정확히 * * 잘못 되었습니까? – Blender