웹 페이지를 디자인 중이며 화면 크기에 관계없이 레이아웃이 동일하게 유지되기를 원합니다. 고정, 절대 및 상대 및 설명과 같은 POSITION 변수를 살펴 보았지만 명확한 답을 찾을 수 없습니다. 나는 그것이 중첩 분할과 관련이 있다고 생각합니다. 누군가 이것이 어떻게 작동하는지에 대해 더 명확한 대답을 줄 수 있습니까? 감사
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title></title>Test
<style type="text/css">
body
{
margin:0;
padding:0;
width:1300px;
height:650px;
color: black;
position:relative;
font-family: 'Satisfy', cursive;
background: #F4EEFE url(backgrounds/linen2.jpg) center center fixed no-repeat;
table td { border:0;vertical-align:top; }
#main {margin:0 auto;}
table.master {position:absolute;width:100%;height:100%;}
td.david {position:relative;}
td.richard {position:relative;vertical-align:bottom;}
td.forBackground{vertical-align:middle;}
td.middle{height:100px;}
#david{margin-top:10%;}
#richard{margin-bottom:15%;}
img.top{z-index:999;}
#button{z-index:999;display:block;text-decoration:none;bottom:2px; height:25px;clear:both;float:right; margin-left:47%; position:fixed; border:0px; padding:0px;}
img.davidbio{z-index:999;display:block;text-decoration:none;bottom:15%; height:200px;width:250px;clear:both;float:left; margin-left:11%; position:fixed; border:0px; padding:0px;}
</style>
</head>
<body>
<div id="container" class="container">
<div id="background-image" class="background-image"></div>
<div id="content">
<center>
<table class="master" border="0">
<tr>
<td width="20%" class="david"><div id="david"><?php include('david.php'); ?></div> </td>
<td width="55%" class="forBackground">
<div id="main" class="main">
<center>
<table class="background" border="0">
<tr>
<td>
</td>
</tr>
<tr>
<td class="middle"><center><br/><br/><font size="5">Text here</font> <br/><font size="7">Names here</font></center></td>
</tr>
<tr>
<td class="middle"><center><img src="heart.png" title="" alt="" width="200px" height="150px" /></center></td>
</tr>
<tr>
<td class="middle"><center><font size="5">Date<br/>
Time<br/>
Location</font></center></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</center>
</div>
</td>
<td width="20%" class="richard"><br/><br/><br/><div id="richard"><?php include('richard.php'); ?></div></td>
</tr>
</table>
</center>
</div>
<input type="button" name="button" id="button" class="button" value=" Click Here;" onClick="MyWindow=window.open('input.php','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" style="color:#F7D358;background-color:#D33033;border:1px solid;
border-top-right-radius:2em;
border-top-left-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;"></button>
<img src="davidbio.png" class="davidbio" alt="" title=""/>
</div>
</body>
</html>
Jsfiddle : http://jsfiddle.net/9hdz2/1/
창의 크기에 관계없이 모든 요소를 동일한 위치에 유지하려면 이러한 모든 요소를 태그 (예 : a div)로 감싸고 고정 너비를 지정해야합니다.
예를 들어 (컨테이너에 ID가 있다고 가정하자 :) #container, CSS :
#container{
width:960px;
margin:0 auto; /*this is to horizontaly center the element
in the window if the window is wider than 960px/*
}
그런 다음 내부 요소에 상대적 또는 정적 (기본) 위치를 사용해야하며 고정 된 상위 차원에서 계산되는 백분율을 사용할 수 있습니다.
#container상대 위치 를 제공하는 경우 절대 위치를 사용할 수도 있습니다 .
귀하의 목표를 위해 위치가 창에 따라 계산되므로 #container흐름을 따르지 않으므로 고정 위치 요소를 사용하지 않을 것 입니다.
이 표현은 간단하므로 CSS 포지셔닝에 대한보다 철저한 정의를 자세히 살펴볼 것을 강력히 권장합니다.
여기에서 몇 가지를 찾을 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다