Необычное позиционирование с использованием CSS без использования Position: Absolute - PullRequest
Новая
       33

Необычное позиционирование с использованием CSS без использования Position: Absolute

0 голосов
/ 16 августа 2011

Я задал этот вопрос на прошлой неделе, но теперь я вернулся и создал демо-версию проблемы - код приведен ниже, и вам понадобится доступ к сети, так как я связался с некоторым JQueryCDN, чтобы он был короче.

По сути, у меня есть ссылки в прямоугольниках, а в Orange нужно разделить столбцы - я могу сделать это, но есть ли способ заставить оставшиеся «зеленые» прямоугольникивыровнять по вертикали?Оранжевые прямоугольники намеренно слишком длинные, поэтому вы можете видеть, где они должны заканчиваться ...

Изображения, размещенные на Picasa, поскольку я не достоин этого!

Изображение того, как оноis

Как и должно быть ...

Код создается динамически, поэтому при обнаружении того факта, что ссылка охватывает столбцы, код будетдобавить код '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 голосов
/ 25 августа 2011

К сожалению, ваш код не очень читабелен (плохие отступы и множество встроенных стилей) и содержит много не относящегося к делу кода для этой проблемы (например, JavaScript).

Прежде всего, я бы посоветовал вам попытаться упростить ваш код - не только для этого тестового примера, но и для вашего проекта в целом, поскольку CSS очень неструктурирован и содержит много дублирующегося кода.

Кроме того, вам нужно объяснить логику макета, который вы пытаетесь достичь. Почему конкретные элементы шире? Почему некоторые выровнены вправо?

В качестве первого шага вам нужно изменить порядок элементов, чтобы они выводились в том порядке, в котором они должны отображаться, читая слева направо (или, возможно, справа налево, в зависимости от желаемой причины). элементы должны быть выровнены по правому краю) сверху вниз. Например, вам нужно будет вывести ссылки во втором поле в порядке № 6, № 14, № 18, № 7, № 5, № 15, № 19 и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...