使用CSS进行花式定位而不使用Position：Absolute

时间：2011-08-16 10:34:38

标签： css cross-browser internet-explorer-6 vertical-alignment

上周我问了这个问题，但我现在回过头来创建了一个问题演示 - 代码如下，你需要访问网页，因为我已经链接到了一些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" alt="Expand this box" 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" alt="Close this box" 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" alt="Expand this box" 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" alt="Close this box" 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" alt="Expand this box" 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" alt="Close this box" src="closeBOB.gif">
</DIV>
</DIV>
</DIV>
<!-- Closes down the second TD cell -->
</TD>
</TR>
</TBODY>
</TABLE>
</DIV><!-- /row -->
</DIV><!-- /container -->
</FORM>
</BODY>
</HTML>

1 个答案:

答案 0 :(得分：0)

不幸的是，您的代码不是非常易读（错误的缩进和许多内联样式），并且包含许多与此问题无关的代码（例如JavaScript）。

首先，我建议您尝试简化代码 - 不仅适用于此测试用例，还适用于您的项目，因为CSS非常非结构化并且包含大量重复代码。

此外，您需要解释您尝试实现的布局的逻辑。为什么特定元素更广泛？为什么有些人正确对齐？

作为第一步，你需要改变元素的顺序，使它们按照它们应该出现的顺序输出，从左到右（或者从右到左，根据你想要的原因）读取所以元素要正确对齐），从上到下。例如，您需要在＃6，＃14，＃18，＃7，＃5，＃15，＃19等订单的第二个框中输出链接。

相关问题
最新问题