mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mi 24.04.2024 06:50 Benutzername: Passwort: Auto-Login

Thema: Wenn div befüllt wird passt das Layout nicht mehr vom 31.03.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Wenn div befüllt wird passt das Layout nicht mehr
Autor Nachricht
siriuzzz
Threadersteller

Dabei seit: 31.03.2014
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 31.03.2014 21:44
Titel

Wenn div befüllt wird passt das Layout nicht mehr

 Antworten mit Zitat Zum Seitenanfang
Hallo,
ich habe ein kleines Layout erstellt, welches auch so stimmt.
Allerdings passt es nicht mehr, wenn ich ein div davon mit Inhalt fülle.
Dazu reicht ein Buchstabe aus, um es zu zerstören.




Das div, indem Pudding steht sollte normalerweise auf einer höhe mit denen daneben sein.
Hier der Code.
Bin für jede Hilfe dankbar.

Code:
<html>
   <head>
      <title></title>
   </head>
   <body>
      <div class="product-item">
         <div class="product-img-div">
            <img src="img/test.jpg" class="product-img"/>
         </div>
         <div class="product-info">
            <div class="product-name">
               Pudding
            </div>
         </div>
         <div class="product-buy">
            
         </div>
      </div>
   </body>
   
   <style>
      .product-item{
         margin: 0 auto;
         width: 650px;
         height: 170px;
         background-color: #808080;
      }
      .product-img-div{
         display: inline-block;
         height: 150px;
         width: 150px;
         background-color: #f00;
         padding: 5px;
      }
      .product-img{
         width: 150px;
         height: 150px;
      }
      .product-info{
         display: inline-block;
         height: 150px;
         width: 310px;
         background-color: #0f0;
         padding: 5px;
      }
      .product-buy{
         display: inline-block;
         height: 150px;
         width: 150px;
         background-color: #00f;
         padding: 5px;
      }
   </style>
   
</html>
  View user's profile Private Nachricht senden
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: Männlich
Verfasst Mo 31.03.2014 22:25
Titel

Antworten mit Zitat Zum Seitenanfang
inline-block verhält sich wie ein inline-Element, was die Positionierung innerhalb der Zeile angeht. Dementsprechend müsstest du vertical-align: top hinzufügen, um alle Elemente oben auszurichten. Ich sehe allerdings eigentlich auch keinen Grund, warum man hier nich einfach Block-Elemente mit float verwenden sollte.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [CSS] Beginner: 2-Spalten Layout - 2.Spalte passt nicht
Website mit festen Layout in dynamisches Layout umbauen
[CSS Layout] An Fenstergröße anpassendes Layout
footer passt sich an browsergröße an?
bild passt sich div-layer an
[css] höhe passt sich nicht dem content an
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB