Размер блока DIV основан на абсолютно позиционированном суб-DIV? - PullRequest
Новая
       7

Размер блока DIV основан на абсолютно позиционированном суб-DIV?

1 голос
/ 08 июня 2009

У меня есть контейнер DIV, который содержит несколько блоков DIVS. Каждый блок-DIV содержит элементы SPAN со значениями. Блоки имеют тот же WIDTH, что и контейнер, и плавают в контейнере, поэтому выглядит, как будто они являются «строками». Элементы SPAN находятся внутри блока DIV.

Каждый блок имеет фиксированную высоту 25 пикселей. Я хочу увеличить высоту блочного DIV (автоматически), основываясь на содержимом элемента SPAN (в примере - .bigger). Однако он не работает должным образом. Есть предложения?

ОБНОВЛЕННЫЙ КОД

test.html 

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>



<div id="VandaagLijst" class="Container">        
        <div
        id="8378" 
        class="WorkorderBlock" 
    size="print"
        >

        <span class="Workorder">A100032</span>
        <span class="Pn">3800702-1</span>
        <span class="Description">Gas Turbine Engine 131-9B</span>
        <span class="LastTask">Visual Inspection</span>
        <span class="Status">Open</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">30-04-2008</span>
        <span class="ActualShipdate">30-04-2008</span>

        <span class="Rek">-29</span>
        <span class="Shortages">4132159-1 (SV): ""<br />4132202-4 (SV): ""</span>


        </div>

        <div
        id="9142" 
        class="WorkorderBlock" 
        statustype="go"
    size="print"
        >

        <span class="Workorder">S100580</span>
        <span class="Pn">3616960-2</span>
        <span class="Description">Cooling Fan Assembly</span>
        <span class="LastTask">Disassembly</span>
        <span class="Status">Open</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">09-06-2008</span>
        <span class="ActualShipdate">09-06-2008</span>

        <span class="Rek">-365</span>
        <span class="Shortages">3616967-1 (SV): ""</span>


        </div>

        <div
        id="9278" 
        class="WorkorderBlock" 
        statustype="delay"
    size="print"
        >

        <span class="Workorder">A100063</span>
        <span class="Pn">3800550-1</span>
        <span class="Description">Gas Turbine Engine Assembly -500</span>
        <span class="LastTask">DMM Readout</span>
        <span class="Status">Quoted - Hold</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">18-07-2008</span>
        <span class="ActualShipdate">18-07-2008</span>
        <span class="Rek">8</span>

        <span class="Shortages">160488-2 (SV): ""<br />160536-1 (SV): ""<br />2704442-4 (SV): ""<br />3101768-1 (NE): ""<br />3202854-1 (SV): ""<br />3283076-5 (SV): ""<br />3503876-6 (SV): ""<br />3505814-3 (OH): ""<br />362-509-9002 (NE): ""<br />3804011-8 (SV): ""<br />3805034-8 (SV): ""<br />3810630-10 (NE): ""<br />3810727-6 (SV): ""<br />3810730-1 (SV): ""<br />3822341-4 (SV): ""<br />3822353-1 (SV): ""<br />3822360-1 (NE): ""<br />3822364-1 (NE): ""<br />3822483-1 (SV): ""<br />3822615-1 (NE): ""<br />3826919-4 (SV): ""<br />3826981-2 (NE): ""<br />3827140-2 (SV): ""<br />3827141-2 (SV): ""<br />3827164-4 (SV): ""<br />3827191-1 (SV): ""<br />3827315-2 (SV): ""<br />3830444-1 (SV): ""<br />3840124-3 (NE): ""<br />3840130-1 (NE): ""<br />3840137-1 (NE): ""<br />3840206-1 (NE): ""<br />3840278-1 (NE): ""<br />3840279-1 (NE): ""<br />3840280-3 (NE): ""<br />3842151-3 (NE): ""<br />3842155-3 (SV): ""<br />3842160-5 (NE): ""<br />3844398-1 (NE): ""<br />3844460-2 (NE): ""<br />3844467-1 (NE): ""<br />3844469-2 (SV): ""<br />3844471-6 (NE): ""<br />3844481-2 (NE): ""<br />3844488-3 (SV): ""<br />3844495-1 (SV): ""<br />3844496-1 (NE): ""<br />3844514-2 (NE): ""<br />3844515-2 (NE): ""<br />3844602-5 (NE): ""<br />3844607-1 (NE): ""<br />3844608-1 (NE): ""<br />3844611-1 (NE): ""<br />3844612-1 (NE): ""<br />3844680-1 (NE): ""<br />3844854-1 (NE): ""<br />3844900-1 (SV): ""<br />3844910-1 (NE): ""<br />3862212-3 (NE): ""<br />3862285-1 (NE): ""<br />3870222-1 (SV): ""<br />3876212-1 (SV): ""<br />3876214-2 (NE): ""<br />3881248-2 (NE): ""<br />3881259-2 (NE): ""<br />3881334-1 (NE): ""<br />3881623-1 (SV): ""<br />3883327-1 (NE): ""<br />3883453-1 (OH): ""<br />3883499-2 (NE): ""<br />3884966-1 (NE): ""<br />3888267-7 (NE): ""<br />3888364-3 (SV): ""<br />4131000-6 (SV): ""<br />525-121-9003 (NE): ""<br />525-203-9006 (NE): ""<br />525-533-9005 (NE): ""<br />73563-53 (NE): ""<br />968214-6 (SV): ""<br />M25988-2-011 (NE): ""<br />M25988-2-012 (NE): ""<br />M25988-2-013 (NE): ""<br />M25988-2-908 (NE): ""<br />M83248-1-012 (NE): ""<br />M83248-1-013 (NE): ""<br />M83248-1-014 (NE): ""<br />M83248-1-016 (NE): ""<br />M83248-1-017 (NE): ""<br />M83248-1-019 (NE): ""<br />M83248-1-023 (NE): ""<br />M83248-1-038 (NE): ""<br />M83248-1-109 (NE): ""<br />M83248-1-110 (NE): ""<br />M83248-1-112 (NE): ""<br />M83248-1-118 (NE): ""<br />M83248-1-128 (NE): ""<br />M83248-1-152 (NE): ""<br />M83248-1-153 (NE): ""<br />M83248-1-158 (NE): ""<br />M83248-1-238 (NE): ""<br />M83248-1-280 (NE): ""<br />M83248-1-906 (NE): ""<br />M83248/1-011 (NE): ""<br />MS21043-3 (NE): ""<br />MS21043-4 (NE): ""<br />MS35769-10 (NE): ""<br />MS35769-6 (NE): ""<br />MS51843-25SS (NE): ""<br />MS9385-906 (NE): ""<br />MS9386-011 (NE): ""<br />MS9386-109 (NE): ""<br />MS9386-258 (NE): ""<br />MS9489-04 (NE): ""<br />MS9556-04 (NE): ""<br />MS9556-05 (NE): ""<br />MS9556-06 (NE): ""<br />MS9556-07 (NE): ""<br />MS9556-10 (NE): ""<br />MS9556-12 (NE): ""<br />MS9556-17 (NE): ""<br />MS9556-18 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-21 (NE): ""<br />MS9557-10 (NE): ""<br />MS9557-15 (NE): ""<br />MS9565-32 (NE): ""<br />MS9705-06 (NE): ""<br />NAS1102E3-7 (NE): ""<br />S8990-276 (NE): ""<br />S8990-281 (NE): ""<br />SL4-280 (NE): ""<br />SL4-280 (NE): ""</span>



        </div>

        <div
        id="9389" 
        class="WorkorderBlock" 
        statustype="delay"
    size="print"
        >
        <span class="Workorder">S100598</span>
        <span class="Pn">3804011-8</span>

        <span class="Description">LOAD COMPRESSOR</span>
        <span class="LastTask">Repair</span>
        <span class="Status">Cust-Delayed </span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">31-12-2009</span>
        <span class="ActualShipdate">31-12-2009</span>
        <span class="Rek">539</span>
        <span class="Shortages">3610875-32 (NE): ""<br />3822343-1 (NE): ""<br />3826927-3 (NE): ""<br />3826961-2 (SV): ""<br />3826984-1 (NE): ""<br />3826986-2 (SV): ""<br />3826987-1 (SV): ""<br />3827041-1 (NE): ""<br />3827055-1 (NE): ""<br />3827076-3 (NE): ""<br />3827093-5 (SV): ""<br />3827160-2 (SV): ""<br />3840124-3 (SV): ""<br />M83248-1-145 (NE): ""<br />M83248-1-145 (NE): ""<br />S8990-167 (NE): ""<br />S8990-276 (NE): ""<br />S8990-605 (NE): ""</span>



        </div>



</div>

</body>
</html>

test.css 

BODY, TH, TD, DIV, SPAN, P {
    font-size:11px;
}

#VandaagLijst {
    position:relative;
    float:left;
    padding:5px;
    background-color:#FFFFFF;
}


#VandaagLijst div.WorkorderBlock {
    float:left;
    position:relative;
    margin:10px;
    border:solid 1px #999999;
    background-color:#EEEEEE;

    width:918px;height:14px;margin:2px;
}


/**
PRINT VERSION
**/


#VandaagLijst div.WorkorderBlock span {
    display:table;
    float:left;
    font-size:11px;
    height:14px;
    position:relative;
    margin-right:5px;
    overflow:hidden;
    width:75px;
    border:solid 1px red;

}

#VandaagLijst div.WorkorderBlock span.Pn {    

    font-weight:bold;
}
#VandaagLijst div.WorkorderBlock span.Description {

    overflow:hidden;
}
#VandaagLijst div.WorkorderBlock span.RemarksAction {
    display:none;
}



#VandaagLijst div.WorkorderBlock span.Shortages {
    width:160px;
    background-color:White;
    overflow:visible;
}


/**
PRINT VERSION
**/

Ответы [ 4 ]

1 голос
/ 08 июня 2009

Положите height:auto; на .WorkorderBlock span.bigger

редактировать после нового кода выше

удалить height:14px из #VandaagLijst div.WorkorderBlock

удалить height:14px и display:table из #VandaagLijst div.WorkorderBlock span

1 голос
/ 08 июня 2009

дать свойство display: table для всего диапазона. нужно больше играть с шириной. удачи

0 голосов
/ 08 июня 2009

Мартейн прав насчет того, что высота поплавка не учитывается.

Однако есть обходной путь: 

<div id="9142" class="WorkorderBlock">
        <span class="Workorder">S100580</span>
        <span class="Pn">3616960-2</span>
        ...
        ...
        <span class="bigger">3616967-1<br />3616967-1<br />
                             3616967-1<br />3616967-1<br />3616967-1<br /></span>        
        <div style="clear:both"></div>
</div>

ЗАМЕЧАНИЕ div со стилем "clear: both" в конце каждого div WorkorderBlock. Это уменьшит влияние не учитываемых высот пролетов.

Но я настоятельно рекомендую использовать таблицы: для этого созданы таблицы!

Ура!

0 голосов
/ 08 июня 2009

Возможно, вы не должны использовать плавающие пролеты.

Если блок (span или div) является плавающим; он вынимается из нормального потока, то есть его размер больше не учитывается в размере содержащего блока. Использование относительного положения, вероятно, лучше всего в вашем случае.

Чтение (части) спецификации CSS 2 может быть хорошим вложением вашего времени.

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

Нет похожих вопросов

...