HTML/CSS Probleme mit floats?

 - (HTML, CSS, Problemlösung)

5 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
.main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
        overflow: auto;
      }

Das Problem ist hier auch schon aufgetreten :)

komischerweise scheint das overflow explizit gesetzt das Problem in allem Browsern zu beheben, probiere es mal

Perfekt! Alles reibungslos und ohne jegliches Problem abgelaufen! Herzlichen Dank Ihnen!

LG und einen schönen Sonntag!

0

Du brauchst nur das Bild zu floaten. Das float: right für das Div sorgt dafür, dass es nichts mehr gibt, was gefloatet werden soll. Einfach nur das Bild floaten. Allerdings hast Du auch das Problem, dass bei jeder Bildschirmgrösse gefloatet wird. Du benötigst also eine eine Weiche:

@media only screen and (max-width: 600px) {

 img {

 float: none;

width: 100%

  }

}

Try it Yourself »

Woher ich das weiß:Berufserfahrung

Wow, vielen Dank - Es funktioniert fast hervorragend! Allerdings erst als ich das Media Query entnahm, aber es klappt! Allerdings hält meine untere Border einen kleinen Abstand zu meinen Inhalten, woran könnte das liegen?

Liebe Grüße und noch einen entspannten Sonntag :)

0

mit float hebst du das ganze aus der ebene aber noch im textfluss des browsers , damit hat der übergeordnete kasten keine höhe , somit der border bei der höhe 0

man könnte es als display:inline-block ; oder mit flexboxen machen .

Okay, ich danke Ihnen erstmal für Ihre Auskunft! Ich werde mal schauen, das Problem durch Ihre Hinweise zu beheben. Bild und Text müssen dann geflext werden, richtig?

LG

0
@korbi27

oder es muss eine feste höhe geben beim partent container . muss man echt ausprobieren ob das mit inline-box etc sich besser verhaält . den das problematische ist , Sie haben float noch nciht verstanden :) float optisch ungleich float browser verhalten . float ist immer eine ganz andere ebene , die aber dort standfindet wo das element gerade genutzt wird , nur hat es eben nix mit dem element wo es sich drinne befindet zu tun bzw keine auswirkung auf diese , weil es eine ebene drüber ist .

0

Was ist los. Standardmäßig berücksichtigt der übergeordnete Block nicht die Höhe der untergeordneten Floating-Elemente. Wenn alle Elemente im Inneren gleitend sind, ist die Höhe des übergeordneten Blocks gleich Null.

Es gibt zwei bewährte Möglichkeiten, diesen Effekt zu vermeiden.

Methode 1. Legen Sie die Eigenschaft "overflow" für den übergeordneten Block fest. Jeder andere Wert als "visible" erstellt einen neuen Formatierungskontext ("Block formatting context") im Block. Der Block berücksichtigt nun die Größe der schwebenden untergeordneten Elemente.

.main-container {
	overflow: auto;
}

oder

.main-container {
	overflow: hidden;
}

Nachteile:

  • Die Eigenschaft "overflow: auto" kann unerwünschte Bildlaufleisten im Block erzeugen. Und die Eigenschaft "overflow: hidden" kann die Schatten der Elemente im Block trimmen.
  • Beim Lesen des Codes ist nicht klar, wofür genau diese Eigenschaft verwendet wird. Wenn Sie es verwenden, fügen Sie einen Kommentar hinzu, zu welchem ​​Zweck es hinzugefügt wird.

Methode 2. Klären Sie den Stream innerhalb des übergeordneten Elements mit der CSS-Eigenschaft "clear". Am bequemsten geht dies mit dem Pseudoelement "after":

.clearfix:after {
	content: " ";
	clear: both;
	display: table;
}

Bootstrap 3 definiert auch das Pseudoelement "before". So löst es gleichzeitig das Problem des Zusammenfallens von Außenabständen meistern:

.clearfix:before {
	content: " ";
	display: table;
}

Nachteile:

  • Sie können die Pseudoelemente des übergeordneten Blocks nicht für andere Aufgaben verwenden.
Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

Versuchs mal so:

<!DOCTYPE html>
<html lang="de-de">
  <head>
    <meta charset="utf-8">
    <title>Hilfe!</title>
  
    <!-- INTERNAL-CSS -->
    <style>
      .main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
      }
  
      img {
        width: 50%;
        height: auto;
        float: left;
      }
  
      .text-container {
        width: 50%;
        float: right;
        font-size: 1.5rem;
        text-align: justify;
      }

      .clr {
        clear:both;
      }  
    </style>
    </head>
  <body>
    <div class="main-container">
      <img src="kueche.jpg" alt="Küche">
      <div class="text-container">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
      <div class="clr"></div>
     </div>
    </body>
</html>

Was möchtest Du wissen?