CSS div Seitenverhältnis?

...komplette Frage anzeigen

2 Antworten

.aussen {
    display:inline-block;
    position:relative;
    width:50%;
    float:left
}
.leer {margin-top:100%}/*verhältnis 1:1 1x1x100*/

.inhalt { position:absolute; top:0; right:0; bottom:0; left:0
} <div class="aussen"> <div class="leer"></div> <div class="inhalt"></div> </div> <div class="aussen"> <div class="leer"></div> <div class="inhalt></div> </div
Antwort bewerten Vielen Dank für Deine Bewertung

html

<div class="box">Inhalt</div>
<div class="box">Inhalt</div>


css

.box {
width: 50%;
float: left;
height: 0; // Hier ist
padding-bottom: 50%; // der Hack :)
}

Demo: http://codepen.io/anon/pen/dOPPrz

Antwort bewerten Vielen Dank für Deine Bewertung
RakonDark 05.11.2016, 15:48

wobei das jetzt gerade bei codepen etwas lustig aussieht , :)

und mit den nachfolge elementen das bei padding etwas kritisch wird ohne weitere hacks zu benutzen .

0
Dory1 05.11.2016, 16:17
@RakonDark

Kommt halt drauf an was der Fragesteller überhaupt beabsichtigt. Mir fällt zumindest auf Anhieb keine andere Lösung ein, die auf reinem CSS basiert.

0
abbrechen 11.11.2016, 01:08

Kommt auf den Inhalt an. padding klappt ganz gut, solange eine childs drin sind. Bei Bildern muss einfach das Bild quadratisch sein. Bei Text wird es tricky. Da empfiehlt es sich weniger, mit Prozenten zu arbeiten, weil man einfach die Höhe angeben muss. Möchte man die 50% aber beibehalten, height: 50%, nach dem
man html und body auf 100% gestellt hat. Aber bei einem Textfeld bietet es sich eher an, einen pixelbasierten Container zu nehmen, der in einem geflexten Parent liegt.

0

Was möchtest Du wissen?