문제
CSS와 함께 다음 레이아웃을 수행 할 수는 있지만 절대/상대 위치를 사용하지 않습니까?
우리는 며칠 동안이 수수께끼를 해결하려고 노력했지만 Box 10에 맞출 수 없었습니다.
솔루션의 CSS + HTML 파일도 제공하십시오. 그래서 우리는 솔루션에 대해 논의 할 수 있습니다.
해결책
방금 사용 하여이 문제를 해결했습니다 이 소스 코드.
업데이트
브라우저가 어떻게 부유 한 품목을 렌더링하는지 설명 할 수 있습니까?
추신. 나의 주요 기술은 부정적인 왼쪽-마진 및 그룹화 div입니다. 상대적이고 절대적인 위치를 사용하지 않고이 문제를 해결하는 단일 방법입니다.
다른 팁
당신은 플로트를 시도 할 수 있습니다 : 모든 상자를 남겼습니다. 그런 다음 상자 6-9에게 음의 상단 마진을 제공하십시오. 명확한 : 왼쪽 상자 5.
그것이 효과가 있는지 확실하지는 않지만 시도해 볼 가치가 있습니다.
모든 것이 가능해야합니다. Jim Neath가 언급했듯이 Float Left, Clears 및 Negative Top Margin으로 상자 1-9를 할 수 있습니다.
Box 10의 경우, 상자 9의 오른쪽에 보이도록 왼쪽으로 떠날 수 있지만, 음의 왼쪽 여백을 적용하여 7 옆에 눌러 밉니다 (8 및 9의 너비에 따라).
출발점으로 Photoshop 또는 다른 소프트웨어를 사용하여 지역을 정의하고 HTML+CSS를 생성 할 수 있습니다.
생성 된 코드는 매우 깨끗하지 않지만 변경을 시작하기에 좋은 기반이 될 것입니다.
내 해결책 :
<style type="text/css">
div { width:524px; height:142px; }
div div { float:left; color:white; text-align:center;}
#objX01 { background:#ed4728; width:91px;height:90px; }
#objX02 { background:#c9b7c3; width:145px;height:50px; }
#objX03 { background:#d7446d; width:168px;height:37px; }
#objX04 { background:#2cdb54; width:120px;height:29px; float: right;}
#objX09 { background:#1e5a82; width:47px;height:90px; float: right;}
#objX08 { background:#224456; width:128px;height:82px; float: right;}
#objX07 { background:#3240c0; width:64px;height:105px; float: right;}
#objX06 { background:#5ee1b1; width:118px;height:92px; float: right;}
#objX05 { background:#e0abce; width:167px;height:52px; }
#objX10 { background:#ec2df6; width:175px;height:23px; float: right;}
</style>
<div style="position:relative; margin:0 auto">
<div id="objX01">01</div>
<div id="objX02">02</div>
<div id="objX03">03</div>
<div id="objX04">04</div>
<div id="objX09">09</div>
<div id="objX08">08</div>
<div id="objX07">07</div>
<div id="objX06">06</div>
<div id="objX05">05</div>
<div id="objX10" style="position:absolute; left:349px; top:119px">10</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style type="text/css">
div#container { width: 500px; height: 143px; }
div#container div { float: left; text-align: center; color: #ffffff; }
div#t01 { width: 85px; height: 85px; background-color: #ee4727; }
div#t02 { width: 138px; height: 49px; background-color: #cab6c2; }
div#t03 { width: 160px; height: 35px; background-color: #d7446e; }
div#t04 { width: 113px; height: 27px; background-color: #2cda54; }
div#t05 { width: 159px; height: 51px; background-color: #e1abcf; clear: left; }
div#t06 { width: 111px; height: 87px; background-color: #5de1b0; margin-top: -36px; }
div#t07 { width: 62px; height: 101px; background-color: #323fbf; margin-top: -50px; }
div#t08 { width: 120px; height: 77px; background-color: #234457; margin-top: -50px; }
div#t09 { width: 44px; height: 85px; background-color: #1f5a82; margin-top: -58px; }
div#t10 { width: 164px; height: 24px; background-color: #eb2cf4; }
</style>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body>
<div id="container">
<div id="t01">T01</div>
<div id="t02">T02</div>
<div id="t03">T03</div>
<div id="t04">T04</div>
<div id="t05">T05</div>
<div id="t06">T06</div>
<div id="t07">T07</div>
<div id="t08">T08</div>
<div id="t09">T09</div>
<div id="t10">T10</div>
</div>
</body>
</html>
IE8, FF2, FF3, Chrome, Safari, Opera에서 작동합니다. 나에게 알려지지 않은 이유로 IE6과 IE7에서 작동하지 않습니다.
(너비와 여백이 약간 떨어질 수 있고, 이미지는 낮은 qual이었고, 방금 Photoshop에서 Magic Wand 도구를 사용했습니다)