| Autor | Zpráva | ||
|---|---|---|---|
| liborrr Profil |
zdravim, nedaří se mi dostat dva divy na jeden radek tak aby zabrali spolecne 100% sirky nadrazeneho bloku (blok ma sirku danou jen pro ukazani v tomto pripade, jinak je pohybliva)
navic u prvniho divu bych rad pouzil content a ten naopak zarovnal vlevo, tak aby bylo jako v prikladu, kde jsem mu surove nacpal pravy padding, aby to vypadalo jak si predstavuju, ale ten je samozrejme spatne, nema tam byt, protoze se nebude menit a to bych potreboval, podle sirky obrazovky zkusil jsem nahrat sem www.w3schools.com/code/tryit.asp?filename=G28MHZIBD2AS nebo kod zde <!DOCTYPE html>
<html>
<head>
<style>
.blok {
border: 1px solid;
height: 200px;
width: 500px;
}
.divjedna, .divdva {
display: inline-block;
border: 1px #712525 solid;
background-color: #a59124;
}
.divdva {
float: right;
}
.valuejedna::before {
content: "PRED ";
padding-right: 301px;
}
</style>
</head>
<div class="blok">
<div class="divjedna">
<div class="obaljedna">
<div class="valuejedna">text vlevo -</div>
</div>
</div>
<div class="divdva">
<div class="obaldva">
<div class="valuedva">text vpravo</div>
</div>
</div>
<div class="divdtri">
<div class="obaltri">
<div class="valuetri">dalsi radek</div>
</div>
</div>
</div>
</html>moc diky za nakopnuti kudy na to |
||
| liborrr Profil |
tak jsem si to sam vyresil pres grid, kdyby se nekomu hodilo:
www.w3schools.com/code/tryit.asp?filename=G28OG0VB0XGW <!DOCTYPE html>
<html>
<head>
<style>
.blok {
display: grid;
grid-template-columns: 1fr max-content;
text-align: right;
}
.divjedna {
grid-column: 1/2;
}
.divdva {
grid-column: 2/3;
}
.divtri {
grid-column: 1/3;
}
.divctyri {
grid-column: 1/3;
}
.valuejedna::before {
content: "PRED ";
float: left;
}
</style>
</head>
<div class="blok">
<div class="divjedna">
<div class="obaljedna">
<div class="valuejedna">text vlevo -</div>
</div>
</div>
<div class="divdva">
<div class="obaldva">
<div class="valuedva">text vpravo</div>
</div>
</div>
<div class="divtri">
<div class="obaltri">
<div class="valuetri">dalsi radek</div>
</div>
</div>
<div class="divctyri">
<div class="obaltri">
<div class="valuetri">dalsi radek</div>
</div>
</div>
</html> |
||
| Keeehi Profil |
#3 · Zasláno: 18. 3. 2019, 23:05:12
Nejsem si jistý zda je to to co jsi chtěl ale přijde mi, že stačí prohodit pořadí prvního a druhého divu a odstranit ten padding.
Živá ukázka |
||
| liborrr Profil |
#4 · Zasláno: 19. 3. 2019, 07:50:31
Keeehi:
Děkuju, to jsem taky zkoušel a vůbec se mi nedařilo (on je original samozřejmě v živé stránce, kde je okolo ještě spousta vlivů), ale ještě jednou zkusím, jsem nakloněn jednodušším řešením. Kromě zarovnání prvního textu bez before doprava je to ono a to se da vyresit pak v pohode. Jeste jednou diky a vyzkousim. |
||
|
Časová prodleva: 5 let
|
|||
0