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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #Box {border: 1px solid rgba(22,57,0,0.8);
            width: 100%;
            height:50px;
        }
        .Elso {
            position:relative;
            top: 0;
            float: left;
            width:50px;
            height: 50px;
            background-color:#CC0000;
        }
        .Masodik {
            position:relative;
            top: 0;
            float: left;
            width: calc(100% - 50px);
            height: 50px;
            background-color:#CCff00;
        }
    </style>
</head>
<body>

<div id="Box">
    <div class="Elso">
        ez
    </div>
    <div class="Masodik">
        az
    </div>
    <div style="clear: both;">
    </div>
</body>
</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
        #Box {
            border: 1px solid rgba(22,57,0,0.8);
            width: 100%;
            height:50px;
        }
        .Elso {
            float: left;
            width:50px;
            height: inherit;
            background-color:#CC0000;
        }
        .Masodik {
            float: left;
            width: calc(100% - 50px);
            height: inherit;
            background-color:#CCff00;
        }
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:

#Box {
	display: flex;
	height: 50px
	border: 1px solid rgba(22, 57, 0, 0.8);
}
.Elso {
	flex: 50px 0;
	background-color: #cc0000;
}
.Masodik {
	flex: 1;
	background-color: #ccff00;
}
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.