«div» «a» -ге дұрыс емес. Мәселен, мұны қалай жасауға болады? (HTML4, CSS2, crossbrowser)

бұл коды бар:

HTML

<div class="temperatura">
    
        <div style="padding-left:12px;">
            Text1
        </div>
    

    
        <div style="padding-right:70px;">            
            Text2
        </div>
            
</div>

CSS

.temperatura
{
    height:34px;
    position:relative;
    background-color:#FF0000;
    font-size:14px;
    font-weight:bold;
}

.temperatura_localita
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-decoration:none;
}

.temperatura_dettagli
{
    width:50%;
    height:34px;
    line-height:34px;
    float:left;
    text-align:right;
    text-decoration:none;
}

Маған екі байланыстыратын элемент (әрқайсысының 50% -ы), сол жаққа (бірінші) және оңға (екіншісіне) толтыру қажет.

Мен білетін жалғыз стратегия - ішкі кодтарды толтырумен бірге a (floatted) жасау.

Бірақ бұл «дұрыс емес». Мұны қалай жасауға болады?

ӨҢДЕУ

The other solution is just change the internal div (the ones with padding) with span : http://jsfiddle.net/p8Mps/3/

Бірақ IE7-де терезені үлкейтуге/азайтуға тырысыңыз: ол сәтсіздікке ұшырайды ...

3
Сіз 50% элементтерге толтыра алмайсыз: ол толтырғыш кеңістікті де алады және жаңа жолды жасайды. Мен бұл түсінікті деп ойладым ...
қосылды автор markzzz, көзі
@markzzz Неліктен якорь элементтерінің өздерінде толтырғышты анықтайсыз?
қосылды автор Šime Vidas, көзі
HTML4 және HTML5 арасындағы айырмашылықтар туралы әңгімелерді бақылап отырыңыз, бұл әр нұсқаны еске салады.
қосылды автор BoltClock, көзі
Неге бұл «дұрыс емес»? Afaik, тек кірістірілген элементтерді ғана қамтуы мүмкін, блоктық деңгей элементтері жоқ. Осылайша, a div (сөйлеу css) «дұрыс емес» (DTD үшін)
қосылды автор knittl, көзі
@Sidnicious: мүмкін, HTML5-те (түпкілікті емес пе?). Мен шын мәнінде HTML4 туралы айттым (бұл туралы айтқан жоқ)
қосылды автор knittl, көзі
@knittl: a элементінде Мөлдір үлдір моделі , яғни ол ата-ананың құрамында болуы мүмкін нәрсені, соның ішінде блоктық деңгейдегі элементтерді қамтуы мүмкін.
қосылды автор s4y, көзі
@Sidnicious: HTML 4.01 сипаттамалары элементтері тек кірістірілген элементтерді қамтуы мүмкін. <div> - блоктық деңгейдегі элемент, сондықтан ол ішінде пайда болмауы керек.
қосылды автор Sparky, көзі

4 жауаптар

Мен 'a' тегтерін жасайтын едім

display: block;

Бұл сізге оларды div тегтері секілді етіп қалыптастыруға мүмкіндік береді және сіз сәйкесінше сол жақ және толтырғышты толтыра аласыз.

2
қосылды
иә, мен де оларды қалаймын, олар float: left;
қосылды автор markzzz, көзі

(anchors) are inline elements.

<div> (divisions) are block level elements.

HTML 4.01 specifications state that elements may only contain inline elements. A <div> is a block level element, so it must not appear inside an .

Never put block level elements inside inline elements.

You would put inline elements inside block level elements instead...

<div class="temperatura">
    <div style="padding-left:12px;">
        
            Text1
       
    </div>
    <div style="padding-right:70px;">
              
            Text2
         
    </div>       
</div>

EDIT based on OP's comments...

http://jsfiddle.net/sparky672/p8Mps/9/

<div class="temperatura">
    <div class="temperatura_localita">
        
            Text1
       
    </div>
    <div class="temperatura_dettagli">
              
            Text2
         
    </div>       
</div>

EDIT 2 based on further comments...

http://jsfiddle.net/sparky672/p8Mps/13/

<div class="temperatura">
    
        Text1 

     
        Text2    
</div>
1
қосылды
Ухм: шын мәнінде олар әртүрлі мәселе ... Сізге рақмет ...
қосылды автор markzzz, көзі
ЖОҚ! Мен оны IE7-де іске қосып, терезені көтеру немесе азайту әрекетін орындап көріңіз: ол сәтсіздікке ұшырайды. Мен осы мәселе бойынша талқылауды аштым stackoverflow.com/questions/7918536/…
қосылды автор markzzz, көзі
Мен Sparky672: temperatura дегенді іздеймін емес пе ... барлығы «контейнер» :)
қосылды автор markzzz, көзі
О, жақсы. Енді мен көремін. Қалай болғанда да, соңғы нұсқаның тағы бір мінез-құлқы бар: бүкіл контейнер (div) іс жүзінде менің мысал ретінде «байланыстырылмаған».
қосылды автор markzzz, көзі
Мені таңқалдым: О Неге сіздің мысалыңыз жұмыс істейді? Оның елі. Шын мәнінде, CSS стильдер кестесінде маржаны қою сәтсіз аяқталады jsfiddle.net/p8Mps/6 . Не болып жатыр?
қосылды автор markzzz, көзі
Бұл түршігерлік көрінеді = бұл семантикамен дұрыс емес (div-ға)
қосылды автор markzzz, көзі
?? Маған олардың желісі керек. Маған 50% қажет: екіншісіне элементтерді қосып, href-ге толтырады.
қосылды автор markzzz, көзі
@markzzz, толтырғыштың орнына маржаны пайдаланбау керек пе? Содан кейін әрқайсысының div ішіндегі 50% әрқайсысынан тегтеріне қойыңыз. Өңделген жауап пен фредпентті қараңыз ... jsfiddle.net/sparky672/p8Mps/8
қосылды автор Sparky, көзі
@markzzz, қайталанатын сұрақтарды бермеңіз. Біреуі жабық болуы мүмкін.
қосылды автор Sparky, көзі
@markzzz, бұл сіз қалағандай жұмыс істейді ... jsfiddle.net/sparky672/p8Mps/13
қосылды автор Sparky, көзі
@markzzz, Жаңартылған скриптті қараңыз, Маржаның мәнерін CSS ішіне қою . Әдетте барлық контейнерлерді (блоктық деңгей) сілтеме сілтемелері ретінде оларды якорь белгісімен орау арқылы көрмейсіз ... onclick оқиғасын бүкіл контейнерге байланыстыратын JavaScript пайдаланасыз. Мәзір жүйелерінде ұқсас нәрсе көресіз, себебі сурет кескіннің кірістірілгендігіне байланысты жақсы якорьмен оралғандықтан.
қосылды автор Sparky, көзі
@markzzz, ол сәтсіздікке ұшырады, себебі енді сіз div қолданылатын сыныптағы маржаны қойып отырсыз. Менің мысалда маржа қолданылды.
қосылды автор Sparky, көзі

Зәкірге қосымша толтыруға арналған контейнер қажет емес. Мәселен, пайдаланыңыз:

<div class="temperatura">
    
        Text1
    

                
        Text2
            
</div>

If you really need a container, change div to span, and add display:block to the span element. After this declaration, the element will "behave" similar to the <div> element.

1
қосылды
Сұрақ бойынша менің ӨЗГЕ тексер. Сізге дисплей қажет емес: ішкі интервал үшін блок, бірақ жылжытуда IE7-де істемейді ...
қосылды автор markzzz, көзі
Мен жай ғана <div style = «padding-left: 12px;»> div дегеннің орнына қолданамын: ол толтырады. Бірақ IE7-де, 50% -ке толтырылған спанс кейде ...
қосылды автор markzzz, көзі
@markzzz Басқа әдіс usespecific display сипаттарынан тұрады, қараңыз jsfiddle.net/ p8Mps/7
қосылды автор Rob W, көзі

Knittl's пікірін ескеріңіз. 2 ықтимал шешім туралы ойлануға болады:

1) div тек қана пайдаланыңыз ( a тегтерінсіз) және қалаған URL мекенжайына қайта бағыттау үшін onclick атрибутын пайдаланыңыз.

2) display: block кодын a CSS қосыңыз және div параметрін өткізіп жіберіңіз. Одан кейін тегтерді қалағандай етіп стилі

1
қосылды
Жоқ. Бөлшектену элементі болмайды. Қате. Firefox бұл қатені түзетуі мүмкін, бірақ IE мұны жасамайды. Сондай-ақ, JavaScript ...
қосылды автор markzzz, көзі
Солутон 1 қолжетімділікке «F» алады (пайдаланушылар пернетақта арқылы навигацияны қалай жүргізеді, скриншот оқушылары бұл сілтемелерге қол жеткізе ме?)
қосылды автор steveax, көзі
@steveax: бұл дұрыс, әдетте бұл жаман тәжірибе. Бұл жай ғана айтқан ...
қосылды автор CdB, көзі
a ішіндегі div емес, a немесе div қолданыңыз. Қалай болғанда да, менің ойымша, бұл өте күрделі емес, егер сіз онымен ойнасаңыз, сіз қалаған нәрсені істей аласыз;)
қосылды автор CdB, көзі