Question

是否可以使用CSS进行以下布局但不使用绝对/相对定位？
我们试图解决这个谜题好几天，但我们无法适应这个盒子10。

请同时提供解决方案的css + html文件。所以我们可以讨论解决方案。

is it possible?

Answer 1

我刚刚使用this source code解决了这个问题。

alt text http://rabu4g.bay.livefilestore.com/y1p4IhbA7NzQWn7G3wY8dkhOEGawswOMPZQ8MXUotkWtx9ppwfcILzwVb3xXKL19d1J-U5d6G7jaftIHjdcwU8_fTFYyJWtaj6t/css.png

<强>更新

Can you explain how browser renders floating item?

PS。我的主要技术是负左边缘和左边距。分组div。这是在不使用相对和绝对位置的情况下解决此问题的单一方法。

Answer 2

你可以尝试浮动：离开所有的方框。然后给方框6-9一个负的上边距。并清楚：左框5。

不完全确定这是否有效，但值得一试。

Answer 3

所有这一切都应该是可行的。正如Jim Neath所提到的那样，你可以使用左边的浮动，清除左边和负顶边距的方框1-9。

对于方框10，你可以向左漂浮，使它通常出现在方框9的右边，但是应用一个负的左边距将其推到7旁边（基于8和9的宽度）。 / p>

Answer 4

我的解决方案：

<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>

Answer 5

作为起点，您可以使用Photoshop或其他软件来定义区域并生成HTML + CSS。

生成的代码不是很干净，但它是开始进行更改的良好基础。

Answer 6

<!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中使用。

（宽度和边距可能略有偏差，图像质量较低，我只是在photoshop中使用魔棒工具）

这种布局可以用CSS完成吗？

6 个答案: