[고정] [액체] [고정] 크로스 브라우저 호환 레이아웃이 필요합니다.고정액 - 고정 레이아웃
HTML :
body
div#col-1
div#col-2
div#col-3
CSS :
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
이 일/더 좋은 방법은 그것을 할 것인가?
확인이 아웃 : http://siteroller.net/articles/3-column-no-tables-no-floats
하지만, 내가 그 일 것이라고 생각하지 않습니다. 당신의 문제점을 해결하기 위해 언급 된 기사에는 많은 링크가 있습니다.
그리고 관심이 있다면 거기에 쓰여진 것을 연장 할 것입니다. 좋아
이것은 내가 원하는 것입니다 : http://siteroller.net/articles/3-caolumn-no-tables-no-floats/prettyboxes-fixed-and-fluid-columns.php하지만 링크가 다운되었습니다! – 3zzy
이 매우 간단합니다.
는 여기에 내가 대신 절대 위치의 수레를 사용하고 코드
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
입니다. 절대 위치 위에 수레를 사용하는 이점은 그 밑에 nother div를 놓을 수 있다는 것입니다. 그리고 그 내용을 명확하게 알려주십시오 : 둘 다 자동으로 페이지 하단에 표시됩니다.
여기에 바닥 글
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
짜잔과 예입니다! 액체 배치가 있습니다.
로버트의 대답을 좋아합니다. 또한 왼쪽, 오른쪽, 중앙 및 바닥 글 주위에 래퍼를 추가합니다. 사용자가 아래로 브라우저를 축소하면
#page {
min-width: 600px;
}
이런 식으로, 그런 다음
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
, 당신은 또한 "페이지"의 스타일을 추가 할 수 있습니다 : 자, 내가 "페이지"에 ID를 설정 매우 작은 크기, 내용은 여전히 좋아 보인다.
적어도 부유물에 시달릴 때까지. 행운을 비네. – SamGoody