현재 this situation을 받았습니다. 두 번째 div는 왼쪽에서 고정되어 있고 두 번째는 유동적입니다. 권리. 두 div의 HTML 위치를 전환해야하지만 웹 페이지 모양은 변경되지 않습니다.두 divs가 나란히, 첫 번째는 오른쪽에 유체, 두 번째는 왼쪽에 고정 너비입니다.
<div id="fluid"></div>
<div id="fixed"></div>
을하지만 웹 페이지가 표시 될 때, 유체 사업부는 왼쪽에서 오른쪽에 있어야하고 고정 :
그래서,
<div id="fixed"></div>
<div id="fluid"></div>
요구 될 수 있습니다. 나는 이것을 알아낼 수 없다. 이것을 할 수있는 방법이 있습니까?
이렇게하는 방법에는 여러 가지가 있습니다. width: 100%으로 설정 한 경우에도 컨테이너 내부에 두 div가있는 것이 가장 좋습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
width: 300px;
height: 100px;
background: #111;
position: absolute;
top: 0; left: 0;
}
#fluid
{
height: 100px;
background: #555;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="container">
<div id="fluid"></div>
<div id="fixed"></div>
</div>
</body>
</html>
현대적인 옵션은 flexbox를 사용하는 것이지만 아직 안정적으로 지원되지 않습니다.
float: right-#fixed -div.
그건 OP가 원하는 것이 아닙니다. 페이지는 시각적으로 동일하게 유지되어야합니다. –
빠른 응답을 보내 주셔서 감사합니다. 그러나이 결과는 http://codepen.io/anon/pen/lEJwt가되어 원래 http://codepen.io/anon/pen/ImEJv처럼 보이지 않습니다. –
환상적입니다. 이것은 아주 잘 작동했습니다. 결과 링크 (http://codepen.io/anon/pen/FHdsJ)가 있습니다. 감사! –