个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我上周问过这个问题，但我现在回去创建了一个问题演示 - 代码如下，你需要访问网络，因为我已经链接到一些 JQuery CDN 以使其更短。
基本上我在方框中有链接，而橙色的链接需要跨越列 - 我可以做到这一点，但是有没有办法让剩余的“绿色”方框垂直对齐？橙色框故意太长，所以你可以看到它们应该在哪里结束......
图片托管在 Picasa 上，因为我不配!
代码是动态创建的，因此在检测到链接跨越列的事实时，代码会将“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
我必须从我的网站中删除()一些iem，然后将它们追加()回来，但是当我追加它们时，它们出现在不同的地方，而我希望它们完全显示在它们以前的同一个地方是。 有什么解决办法吗？ 这是一个沙箱，请随意更新(注
一个。图片 (960x7)b. div(宽度:960，填充:10) 我想定位 (a)，使其距顶部 50 像素，居中。我想将 (b) 放置在 (a) 的正下方，没有空格。 我的 CSS 如下: @cha
放置某物的正确方法是什么？我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭1
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个，想知道他们是如何实现向下滚动时发生的效果的，菜单栏在滚动前处于一个位置，然后转到顶部并自
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
接口定义 能够对于文字、段落乃至任何元素的精准定位 并做出增删改查，都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
例如，使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么？ 我尝试通过更改边距将第四个 tabitem 向右移动，但这并没有产生好的结
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠，我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集，因此归功于编写该部分
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。 我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作，但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
我正在尝试创建一个棋盘，并将其放置在屏幕中间，但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上，因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
我正在尝试从 mysql 中的 2 个字符串点之间提取数据，我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位，“P1=”是起
如何在 JavaFX 中设置按钮的位置？我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
我有一个 iPhone 应用程序，我可以在其中显示一系列图像。当用户点击图像时，我需要将该图像带到第一个位置，表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
在下图中，它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框，然后我需要我的图像
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角，图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置，所以使用默认值，图像也是
如何将我的文本和图像对齐在同一行？ 每当我使用 padding 或 margins 时，它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
简单的问题，如何定位具有整个页面引用的元素？ 在我的例子中，我在标题中得到了一个 float 图像，然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余
我是一名优秀的程序员,十分优秀！