使用 CSS 而不使用 Position 的花哨定位：绝对
Posted
技术标签:
【中文标题】使用 CSS 而不使用 Position 的花哨定位：绝对【英文标题】：Fancy positioning using CSS without using Position : Absolute 【发布时间】：2011-10-27 22:57:26 【问题描述】：我上周问过这个问题，但我现在已经返回并创建了一个问题的演示 - 代码如下，您需要访问网络，因为我已经链接到一些 JQuery CDN 以使其更短。
基本上我在框中有链接，而橙色中的链接需要跨越列 - 我可以这样做，但是有没有办法让剩余的“绿色”框垂直对齐？橙色框故意太长，所以你可以看到它们应该在哪里结束......
图片托管在 Picasa 上，因为我不配！
Image of how it is
As it should be...
代码是动态创建的，等等检测到链接跨列的事实，代码将添加 'style="width=xxxPx;"' 代码到链接......它并不完美，但混合样式表中的 CSS 和标签中的样式有效。
任何解决方案也需要在 IE6 中运行！
一如既往，我们将不胜感激 - 在此先感谢劳伦斯
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>Project Delivery</TITLE>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<style type="text/css">
BODY
PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ffffff; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #222222; FONT-SIZE: 9pt; TOP: 0px; FONT-WEIGHT: normal; PADDING-TOP: 0px; LEFT: 0px
.cap TEXT-ALIGN: center; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; WIDTH: 120px; PADDING-RIGHT: 3px; COLOR: #ffffff; FONT-WEIGHT: 700; PADDING-TOP: 3px
.wrk BORDER-BOTTOM: #5484bb 4px solid; TEXT-ALIGN: center; BORDER-LEFT: #326299 2px solid; PADDING-BOTTOM: 700px; MIN-HEIGHT: 26px; PADDING-LEFT: 3px; WIDTH: 120px; PADDING-RIGHT: 3px; MARGIN-BOTTOM: -700px; FLOAT: left; COLOR: #ffffff; OVERFLOW: hidden; BORDER-TOP: #326299 2px solid; CURSOR: pointer; FONT-WEIGHT: 700; MARGIN-RIGHT: 2px; BORDER-RIGHT: #5484bb 4px solid; PADDING-TOP: 3px
.wrkRow BORDER-BOTTOM: red 0px solid; MIN-WIDTH: 1060px; BORDER-LEFT: red 0px solid; MARGIN-BOTTOM: 2px; FLOAT: left; MARGIN-LEFT: 4px; OVERFLOW: hidden; BORDER-TOP: red 0px solid; BORDER-RIGHT: red 0px solid
.box BORDER-BOTTOM: #326299 2px solid; BORDER-LEFT: #326299 2px solid; PADDING-BOTTOM: 3px; MIN-HEIGHT: 26px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; FLOAT: left; BORDER-TOP: #326299 2px solid; MARGIN-RIGHT: 3px; BORDER-RIGHT: #326299 2px solid; PADDING-TOP: 3px
.boxOpen BORDER-BOTTOM: #5484bb 4px solid; BORDER-LEFT: #326299 2px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; FLOAT: left; BORDER-TOP: #326299 2px solid; MARGIN-RIGHT: 3px; BORDER-RIGHT: #5484bb 4px solid; PADDING-TOP: 3px
div#boxOpen overflow: hidden
.clearFloat LINE-HEIGHT: 0px; HEIGHT: 0px; FONT-SIZE: 1px
.link BORDER-BOTTOM: #666666 3px outset; TEXT-ALIGN: center; BORDER-LEFT: #dfdfdf 1px inset; PADDING-BOTTOM: 2px; BACKGROUND-COLOR: #cecece; PADDING-LEFT: 2px; WIDTH: 94%; PADDING-RIGHT: 2px; MARGIN-BOTTOM: 2px; FLOAT: left; COLOR: #000000; FONT-SIZE: 0.95em; BORDER-TOP: #dfdfdf 1px inset; CURSOR: pointer; BORDER-RIGHT: #666666 3px outset; PADDING-TOP: 2px
.linkL BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 100px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: left;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: LEFT;
.linkL2
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 123px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: left;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: LEFT
.linkL3
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 112px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: left;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: LEFT
.linkM
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 112px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
MARGIN-LEFT: 126px;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: Left;
.linkR
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 112px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: right;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: Right
.linkR2
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 123px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: right;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: Right
.linkR3
BORDER-BOTTOM: #666666 3px outset;
TEXT-ALIGN: center;
BORDER-LEFT: #dfdfdf 1px inset;
PADDING-BOTTOM: 2px;
BACKGROUND-COLOR: #cecece;
PADDING-LEFT: 2px;
WIDTH: 108px;
PADDING-RIGHT: 2px;
MARGIN-BOTTOM: 2px;
FLOAT: right;
COLOR: #000000;
FONT-SIZE: 0.95em;
BORDER-TOP: #dfdfdf 1px inset;
CURSOR: pointer;
BORDER-RIGHT: #666666 3px outset;
PADDING-TOP: 2px;
CLEAR: Right
.addPointer CURSOR: pointer
</style>
<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT>
<SCRIPT src="https://raw.github.com/malsup/corner/master/jquery.corner.js"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT type=text/javascript>
function show(n)
var valShow = "#"+n+"x";
var valHide = "#"+n;
$(valHide).hide(0,function()
$(valShow).slideDown(500);
);
/* collapse the content box quickly */
function hide(n)
var valShow = "#"+n;
var valHide = "#"+n+"x";
$(valHide).hide(0,function()
$(valShow).slideDown(300);
);
/* ready function is when the document has fully loaded */
var maxgroups = 64;
</SCRIPT>
</DIV>
<!--
Page layout as follows
-----------------------------------------------------------------------------------
| Cell 1 | <div> Integrated Change |
| | <div>Collapsed Box</div> |
| Trans- | <div>Open box </div> |
| formation | <div>Collapsed Box </div> |
| | <div>Open Box <div> |
| | <div>Collapsed Box </div> |
| | <div>Open Box </div> |
| | </div> |
-----------------------------------------------------------------------------------
-->
<FORM name=a>
<DIV class=row>
<TABLE class=rowTable>
<TBODY>
<TR>
<!-- cell 1 -->
<TD style="BORDER-BOTTOM: #326299 4px solid; BORDER-LEFT: #326299 4px solid; BACKGROUND-COLOR: #506228; BORDER-TOP: #326299 4px solid; BORDER-RIGHT: #326299 4px solid" vAlign=top width=120 align=middle>
<DIV class=capbox>
<DIV style="BACKGROUND-COLOR: #506228" class=cap>
<DIV class=subtleLink>ZONE 1</DIV>
</DIV><!-- cap -->
</DIV><!-- cap box -->
</TD>
<!-- end of cell 1, start of cell 2 -->
<TD>
<DIV class=wrkRow>
<DIV style="BACKGROUND: #506228; DISPLAY: block" class=wrk>Row<br>One</DIV><!-- end of wrk -->
<!-- box collapsed -->
<DIV style="BACKGROUND-COLOR: #c5d698; WIDTH: 265px; DISPLAY: block" id=grp20 class=box>
<DIV class=addPointer onclick="javascript:show('grp20');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="openBOB.gif">
</DIV>
</DIV>
<!-- box open -->
<DIV style="BACKGROUND-COLOR: #ffffff; WIDTH: 265px; DISPLAY: none" id=grp20x class=boxOpen><!-- group number is 20 -->
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL2">This is Link #1</DIV>
<DIV style="BACKGROUND-COLOR: #E8852F; width: 258px;" class="linkL2">This is Link #2 - span 2 columns</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR2">This is link #3</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR2">This is link #4</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR2">This is link #5</DIV>
<!-- this is the image to collapse the box -->
<DIV class=addPointer onclick="javascript:hide('grp20');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="closeBOB.gif">
</DIV>
</DIV> <!-- this is where the first expandable box ends, and the second begins -->
<!-- box collapsed -->
<DIV style="BACKGROUND-COLOR: #c4d69d; WIDTH: 370px; DISPLAY: block" id=grp21 class=box>
<DIV class=addPointer onclick="javascript:show('grp21');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="openBOB.gif">
</DIV>
</DIV>
<!-- box open -->
<DIV style="BACKGROUND-COLOR: #ffffff; WIDTH: 370px; DISPLAY: none" id=grp21x class=boxOpen><!-- group number is 21 -->
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is Link #6</DIV>
<DIV style="BACKGROUND-COLOR: #E8852F; width: 364px" class="linkL">This is link #7 - should span 3 columns</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #8</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #9</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #10</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #11</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #12</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL3">This is link #13</DIV>
<DIV class="clearFloat"></div>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkM">This is link #14</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkM">This is link #15</DIV>
<DIV style="BACKGROUND-COLOR: #E8852F; width: 238px;" class="linkM">This is link #16 - span 2 cols</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkM">This is link #17</DIV>
<DIV class="clearFloat"></div>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR3">This is link #18</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR3">This is link #19</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR3">This is link #20</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR3">This is link #21</DIV>
<DIV class=addPointer onclick="javascript:hide('grp21');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="closeBOB.gif">
</DIV>
</DIV><!-- /loop on grp21 -->
<!-- expanding box 2 -->
<DIV style="BACKGROUND-COLOR: #d8e4be; WIDTH: 265px; DISPLAY: block" id=grp22 class=box>
<DIV class=addPointer onclick="javascript:show('grp22');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="openBOB.gif">
</DIV>
</DIV>
<DIV style="BACKGROUND-COLOR: #ffffff; WIDTH: 265px; DISPLAY: none" id=grp22x class=boxOpen><!-- group number is 22 -->
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL2">This is link #22</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL2">This is link #23</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL2">This is link #24</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkL2">This is link #25</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR2">This is link #26</DIV>
<DIV style="BACKGROUND-COLOR: #c4d69d" class="linkR2">This is link #27</DIV>
<DIV class=addPointer onclick="javascript:hide('grp22');">
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; FLOAT: right; CLEAR: both; BORDER-TOP: 0px; BORDER-RIGHT: 0px" src="closeBOB.gif">
</DIV>
</DIV>
</DIV>
<!-- Closes down the second TD cell -->
</TD>
</TR>
</TBODY>
</TABLE>
</DIV><!-- /row -->
</DIV><!-- /container -->
</FORM>
</BODY>
</HTML>
【问题讨论】：
您的图片链接似乎已损坏。 道歉 - Picasa 中的权限设置不正确 - 现已修复 刚刚审核过 - 无需再担心 - 现在不是我的问题了... 【参考方案1】：不幸的是，您的代码可读性不强（缩进不良和大量内联样式），并且包含许多与此问题无关的代码（例如 JavaScript）。
首先，我建议您尝试简化您的代码 - 不仅适用于这个测试用例，还适用于您的项目，因为 CSS 非常非结构化并且包含大量重复代码。
此外，您还需要解释您尝试实现的布局的逻辑。为什么特定元素更宽？为什么有些是靠右对齐的？
作为第一步，您需要更改元素的顺序，以便按照它们应该出现的顺序输出，从左到右（或者可能从右到左，具体取决于您想要的原因）所以元素要右对齐），从上到下。例如，您需要按照 #6、#14、#18、#7、#5、#15、#19 等顺序输出第二个框中的链接。
【讨论】：
以上是关于使用 CSS 而不使用 Position 的花哨定位：绝对的主要内容，如果未能解决你的问题，请参考以下文章
CSS position: absoluterelative定位问题详解
css问题background的简写中background-position和background-size的顺序问题