ugrás a tartalomhoz

Pozicionálás probléma (Számított szélesség)

Corneleus · 2019. Nov. 5. (K), 15.12
Sziasztok
Lenne egy olyan problémám, hogy egymás mellet van két div-em egy 100% széleségre állított divben, az egyik fix szelességű, a másik viszont dinamikusan kellene kitöltse a maradék helyet. Ehelyett, a második, vagy leugrik egy sorral (ha %-osan alítom), Vagy csak a szöveg széleségében tölti ki a fennmaradó helyet az alábbi kóddal:

<style>
#Box {border: 1px solid rgba(22,57,0,0.8);
widht: 100%;
height:52px;
}
.Elso {
position:relative;
top: 0px;
float: left;
width:50px;
height: 50px;
background-color:#CC0000;
}
.Masodik {
position:relative;
top: 0px;
float: left;
width: auto;
height: 50px;
background-color:#CCff00;
}
</style>

<div id="Box">
<div class="Elso">
ez
</div>
<div class="Masodik">
az
</div>
<div style="clear: both;">
</div>
‹ Hálózati meghajtó div frissítés blokkolása ha a felhasználó görget ›
 ■
1

Számított szélesség

Pepita · 2019. Nov. 5. (K), 15.31
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style>  
  7.         #Box {border: 1px solid rgba(22,57,0,0.8);  
  8.             width: 100%;  
  9.             height:50px;  
  10.         }  
  11.         .Elso {  
  12.             position:relative;  
  13.             top: 0;  
  14.             float: left;  
  15.             width:50px;  
  16.             height: 50px;  
  17.             background-color:#CC0000;  
  18.         }  
  19.         .Masodik {  
  20.             position:relative;  
  21.             top: 0;  
  22.             float: left;  
  23.             width: calc(100% - 50px);  
  24.             height: 50px;  
  25.             background-color:#CCff00;  
  26.         }  
  27.     </style>  
  28. </head>  
  29. <body>  
  30.   
  31. <div id="Box">  
  32.     <div class="Elso">  
  33.         ez  
  34.     </div>  
  35.     <div class="Masodik">  
  36.         az  
  37.     </div>  
  38.     <div style="clear: both;">  
  39.     </div>  
  40. </body>  
  41. </html>  
Volt benne néhány másik hiba is, a lényeg a számított szélességen van.
Biztosan lehet ezt már szebben-jobban is csinálni, hirtelen ez jutott eszembe.
2

így szebb egy picit

Pepita · 2019. Nov. 5. (K), 15.37
  1. #Box {  
  2.     border: 1px solid rgba(22,57,0,0.8);  
  3.     width: 100%;  
  4.     height:50px;  
  5. }  
  6. .Elso {  
  7.     float: left;  
  8.     width:50px;  
  9.     height: inherit;  
  10.     background-color:#CC0000;  
  11. }  
  12. .Masodik {  
  13.     float: left;  
  14.     width: calc(100% - 50px);  
  15.     height: inherit;  
  16.     background-color:#CCff00;  
  17. }  
3

:)

Corneleus · 2019. Nov. 5. (K), 15.44
Köszönöm!
Tökéletesen müködik :)
4

Nálunk a főnök a fejébe

kuka · 2019. Nov. 5. (K), 18.40
Nálunk a főnök a fejébe vette, hogy a flexbox az üdvözítő út, úgyhogy itt valahogy így nézne ki:
  1. #Box {  
  2.     display: flex;  
  3.     height: 50px  
  4.     border: 1px solid rgba(22, 57, 0, 0.8);  
  5. }  
  6. .Elso {  
  7.     flex: 50px 0;  
  8.     background-color: #cc0000;  
  9. }  
  10. .Masodik {  
  11.     flex: 1;  
  12.     background-color: #ccff00;  
  13. }  
A dokumentum komplexitásától függően elég hosszúra nyúlhat a szívás amíg minden összejön ugyanolyanra mint azelőtt. De újonnan kezdett dokumentum esetében lehet erre is gondolni.