• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Float

M

musclebreast

Mitglied
Hallo,

ich habe ein div in dem dem 3 divs sind und mit float left jeweils angeordnet sind. Das funktioniert super....sobald ich aber den browser zusammenschiebe dann rutsche die einzelnen Divs in die nächste Zeile. Wie kann ich so etwas unterbinden? Ich hoffe ihr habt da einen Tipp?

LG,

Lara
 
Werbung:
Vergib eine Mindestbreite für das umgebende Element. Oder verwende Flexboxen statt floats.
 
Werbung:
Hallo,

eine Lösung könnte zum Beispiel so aussehen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Container anordnen 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
      }
      body {
         padding: 0;
      }
      body>div {
         display: flex;
      }
      div {
         padding: 0.5rem;
         border: 2px solid silver;
         border-radius: 0.5rem;
         margin: 0.5rem;
         flex: auto;
      }
   }
   </style>
</head>
<body>
   <div>
      <div><p>div1</p></div>
      <div><p>div2</p></div>
      <div><p>div3</p></div>
   </div>
</body>
</html>

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben