这个布局可以用CSS完成吗？_Css_Layout

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

css layout

这个布局可以用CSS完成吗？,css,layout,Css,Layout,是否可以使用CSS进行以下布局，但不使用绝对/相对定位？我们花了好几天的时间试图解开这个谜语，但都没能猜出答案还请提供解决方案的css+html文件。所以我们可以讨论解决方案您可以尝试浮动：保留所有框。然后给方框6-9一个负的上边距。并清除：左框5 不完全确定这是否可行，但值得一试。所有这些都应该是可行的。正如Jim Neath所提到的，您可以使用浮动左边距、清除和负上边距来执行方框1-9 对于框10，您可以将其向左浮动，使其通常显示在框9的右侧，但应用负左边距将其推到7的旁边（基于8和9

是否可以使用CSS进行以下布局，但不使用绝对/相对定位？
我们花了好几天的时间试图解开这个谜语，但都没能猜出答案

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

您可以尝试浮动：保留所有框。然后给方框6-9一个负的上边距。并清除：左框5

不完全确定这是否可行，但值得一试。

所有这些都应该是可行的。正如Jim Neath所提到的，您可以使用浮动左边距、清除和负上边距来执行方框1-9

对于框10，您可以将其向左浮动，使其通常显示在框9的右侧，但应用负左边距将其推到7的旁边（基于8和9的宽度）。

我的解决方案：

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


div{宽度：524px；高度：142px；}
div div{float:left；颜色：白色；文本对齐：居中；}
#objX01{背景：#ed4728；宽度：91px；高度：90px；}
#objX02{背景：c9b7c3；宽度：145px；高度：50px；}
#objX03{背景：#d7446d；宽度：168px；高度：37px；}
#objX04{背景：2cdb54；宽度：120px；高度：29px；浮点：右；}
#objX09{背景：#1e5a82；宽度：47px；高度：90px；浮点：右；}
#objX08{背景：224456；宽度：128px；高度：82px；浮点：右；}
#objX07{背景：3240c0；宽度：64px；高度：105px；浮点：右；}
#objX06{背景：5ee1b1；宽度：118px；高度：92px；浮点：右；}
#objX05{背景：e0abce；宽度：167px；高度：52px；}
#objX10{背景：#ec2df6；宽度：175px；高度：23px；浮点：右；}
01
02
03
04
09
08
07
06
05
10

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

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

我刚刚通过使用解决了这个问题

更新

我的主要技术是负左边距和分组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>

div#容器{宽度：500px；高度：143px；}
div#container div{float:左；文本对齐：居中；颜色：#ffffff；}
div#t01{宽度：85px；高度：85px；背景色：#ee4727；}
div#t02{宽度：138px；高度：49px；背景色：#cab6c2；}
div#t03{宽度：160px；高度：35px；背景色：#d7446e；}
div#t04{宽度：113px；高度：27px；背景色：2cda54；}
div#t05{宽度：159px；高度：51px；背景色：e1abcf；清除：左；}
div#t06{宽度：111px；高度：87px；背景色：5de1b0；页边顶部：-36px；}
div#t07{宽度：62px；高度：101px；背景色：323fbf；页边顶部：-50px；}
div#t08{宽度：120px；高度：77px；背景色：234457；页边顶部：-50px；}
div#t09{宽度：44px；高度：85px；背景色：1f5a82；页边顶部：-58px；}
div#t10{宽度：164px；高度：24px；背景色：#eb2cf4；}
T01
T02
T03
T04
T05
T06
T07
T08
T09
T10

在IE8、FF2、FF3、Chrome、Safari、Opera中工作。在IE6和IE7中不起作用，原因我不知道

（宽度和边距可能有点不合适，图像质量不高，我刚刚在photoshop中使用了魔杖工具）

这不应该有“幽默”标签吗？；）这是可能的。它会设法解决的。高度固定了吗？布局应该如何运行？还是所有的尺寸都是固定的？我认为目前没有足够的信息来提供单一的解决方案。你说的“不使用绝对/相对定位”是什么意思？当然，没有任何定位是不可能做到的？：）@Tom，我的意思是，不要使用属性位置（绝对/相对）并给出top，left。。跳伞<你可以使用float和clear。听起来这是一个明智的建议。我认为这是一种提供位置的替代方式。所以我不想使用这个解决方案。@Ender，那么可以使用什么样的CSS属性呢？如果“位置”和“浮动”不匹配，则剩下的选项很少。但这可能会导致问题无法解决。@Ionut，floating是可以的，但我不想使用像top、left等定位属性。@Ender：他不是建议使用top和left属性。只有一个明确的答案：这是不可能的。因为大多数可以创建html的程序都使用position absolute来解决这个问题。我只是在IE8和FF3.5上进行了测试。此外，IE7不能完全正确地显示CSS 2.1标准。但IE8显示得更好。此外，我无法测试IE7浏览器，因为我使用的是WindowsServer2008R2 64位。抱歉。使用负边距定位元素肯定不比使用绝对定位好吗？对于#objX10，您不能使用绝对位置。我喜欢你的代码。它非常干净。请将您的objX10样式更改为“页边顶部：-23px；”。一切正常。但它仍然使用负边距/填充。