个人中心
gpt4 book ai didi

css - 在不使用位置 : Absolute 的情况下使用 CSS 进行花式定位

转载 作者：行者123 更新时间：2023-11-28 14:33:22 26 4
gpt4 key购买 nike

我上周问过这个问题，但我现在回去创建了一个问题演示 - 代码如下，你需要访问网络，因为我已经链接到一些 JQuery CDN 以使其更短。

基本上我在方框中有链接，而橙色的链接需要跨越列 - 我可以做到这一点，但是有没有办法让剩余的“绿色”方框垂直对齐？橙色框故意太长，所以你可以看到它们应该在哪里结束......

图片托管在 Picasa 上，因为我不配!

Image of how it is

As it should be...

代码是动态创建的，因此在检测到链接跨越列的事实时，代码会将“style="width=xxxPx;"'代码添加到链接中……这并不完美，但混合了样式表中的 CSS 和标签中的样式有效。

任何解决方案也需要在 IE6 中工作!

一如既往，我们将不胜感激 - 提前致谢，Lawrence

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

最佳答案

不幸的是，您的代码可读性不佳(缩进错误和大量内联样式)并且包含许多与此问题无关的代码(例如 JavaScript)。

首先，我建议您尝试简化您的代码 - 不仅针对此测试用例，而且针对您的一般元素，因为 CSS 非常松散并且包含大量重复代码。

此外，您还需要解释您要实现的布局的逻辑。为什么特定元素更宽？为什么有些向右对齐？

作为第一步，您需要更改元素的顺序，以便它们按照它们应该出现的顺序输出，从左到右(或者可能从右到左，取决于您想要的原因)所以元素要右对齐)，从上到下。例如，您需要按照 #6、#14、#18、#7、#5、#15、#19 等顺序输出第二个框中的链接。

关于css - 在不使用位置 : Absolute 的情况下使用 CSS 进行花式定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7076831/

26 4 0
文章推荐： javascript - 处理文档中的多个ID
文章推荐： ios - 如何在 UITableViewCell 中调用 popviewcontroller
文章推荐： javascript - readFile() 内部的回调函数
文章推荐： Swift IBDesignables 和字符间距(字距调整)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com