Antworten auf deine Fragen:
Neues Thema erstellen

Mehrere divs auf eine Höhe

MarionM

Noch nicht viel geschrieben

Hallo,

ich erstelle eine neue Webseite im responsive Design und habe auch mehrere divs erstellt.

An einer Stelle habe ich drei divs nebeneinander stehen und sobald die Bildschirmauflösung kleiner wird, teilt sich das dann auf. Alle divs haben eine Hintergrundfarbe, sodass sie wie "Kästchen" aussehen.

Mein Problem jedoch ist, dass der Text in div1 länger ist als in div2. So sieht man sofort, dass das Kästchen in div2 kürzer ist als in div1 und sieht natürlich unschön aus.

Gibt es eine Möglichkeit, dass man mehrere divs auf eine Höhe bringen kann, sodass es noch immer flexibel ist? Oder dass die anderen divs sich auf die Höhe vom 1. div anpassen sollen? Oder gar andere Lösungen?

Eine Möglichkeit wäre natürlich, die Hintergrundfarbe der divs zu entfernen, damit es die gleiche Farbe mit dem Hintergrund hat. So würde man nicht mehr sehen, dass div2 kürzer ist. Aber mir wäre lieber, wenn die Hintergrundfarbe bestehen bleiben würde.

Ich hoffe, dass man mir weiterhelfen kann.

Vielen Dank für die Hilfe im Voraus.
 

dernorb

Nicht mehr ganz neu hier

mach mal bitte einen screenshot und zeige einen ausschnitt aus deinem quellcode zum besseren Verständnis. Denn aus deiner Beschreibung werde ich noch nicht richtig schlau, was genau dein Problem ist - einmal schreibst du von Breite und dann wieder von Höhe....
 

MarionM

Noch nicht viel geschrieben

Hier habe ich zwei Screenshots:



Im ersten Screenshot ist es für eine Desktopansicht und das andere für eine Tabletansicht. Und man sieht schon, dass Div2 von der Höhe kürzer ist, weil der Text kürzer ist als in Div1.

Hier der Code für die Desktopansicht. DerUnterschied bei der Tabletvariante ist nur, dass width andere Werte hat:
Code:
.other {
    float: left;
    width: 31%;
    margin-right: 3%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 1% 3% 2% 3%;
    border-radius: 5px;
    background: #242424;
    box-shadow: 0 3px 2px rgba(0,0,0,0.2);
    margin-top: 1.5%;
    color: white;
   
    }
 

MarionM

Noch nicht viel geschrieben

Vielen Dank für die zahlreichen Antworten und Lösungsvorschlägen. :danke:
Ich werde nun von den ganzen Vorschlägen sehen welches zu meinem Problem passt und dieses behebt. :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben