Warum ist overflow: hidden funktioniert nicht auf meinem div?

Wenn Sie versuchen, geben margin-left zu C1 div, verschiebt es und überlauf versteckt ist. Aber wenn Sie versuchen zu geben margin-left bis C2 div, verschiebt es nach rechts, überlauf ist aber nicht versteckt, sondern es bewegt sich in die nächste Zeile (Verhalten inline-block).

Also, warum es nicht funktioniert auf C2 div? Gibt es eine Möglichkeit, dieses problem zu lösen?

(Im Grunde möchte ich C1 und C2 div platziert werden, zusammen und überlauf ausgeblendet werden soll, wenn ich erhöhen Ihre breiten, oder wenn ich die beiden Ränder).

Hier ist, was ich versuche:

CSS:

.c1 {
  width: 220px;
  height: 200px;
  background-color: #666666;
  display: inline-block;
}
.c2 {
  width: 200px;
  height: 220px;
  background-color: #CCCCCC;
  display: inline-block;
}
.c3 {
  width: 180px;
  height: 210px;
  background-color: #333333;
  display: block;
}
.wrapper {
  background-color: red;
  width: 500px;
  height: 500px;
  display: inline-block;
  overflow: hidden;
}

HTML:

<div class="wrapper">
  <div class="c1">C1</div>
  <div class="c2">C2</div>
  <div class="c3">C3</div>
</div>

InformationsquelleAutor Vikas Kumar | 2016-01-30
  1. 10

    Hinzufügen white-space: nowrap auf den container (.wrapper).

    white-space

    Den white-space - Eigenschaft wird verwendet, um zu beschreiben, wie Leerraum innerhalb
    das element behandelt wird.

    nowrap

    Zusammenbricht Leerzeichen für normal, aber unterdrückt den Zeilenumbruch (text
    Verpackung) innerhalb von text.

    Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

    Zu verstehen, warum, mit white-space: normal -, C2-wraps, aber C1 nicht, siehe diese Beiträge:

    Hier ein Auszug aus einem Antwort von @BoltClock:

    • Den Wert overflow auf einen container hat keinen Einfluss auf ob oder
      wenn Ihr Inhalt überlaufen; es werden nur änderungen, wie Sie und Ihre Inhalte angezeigt werden, wenn überlauf hat auftreten.

    • So haben Sie zu zwingen, die inline-Blöcke tatsächlich überlauf der
      container.

    • Da ein inline-block hat die gleiche starre physikalische Struktur als block
      container-box, es ist unmöglich für ein inline-block zu "zerbrechen" oder
      wickeln Sie, wenn es nur inline-level-box auf eine bestimmte Zeile im Feld.

    InformationsquelleAutor Michael_B
  2. 0

    Nicht verwenden Display-Eigenschaft.. Verwenden die Float-Eigenschaft zum Beispiel

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-2.2.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.c1{
    width: 220px;
    height: 200px;
    background-color:#666666;
   float:left;
   margin-left:10px;
   overflow:hidden;

    }
.c2{
    width: 200px;
    height: 220px;
    background-color:#CCCCCC;
 float:left;
   margin-left:10px;
   overflow:hidden;
    }
.c3{
    width: 180px;
    height: 210px;
    background-color: #333333;
    float:left;
   margin-left:10px;
   overflow:hidden;
    }
.wrapper{
    background-color: red;
    width: 500px;
    height: 500px;
    display: inline-block;
    overflow: hidden;
    }
</style>
</head>

<body>
<div class="wrapper">
<div class="c1">C1</div>
<div class="c2">C2</div>
<div class="c3">C3</div>
</div>
</body>
</html>
    • Bitte machen Sie ein snippet.
    InformationsquelleAutor Ashish Talreja
Schreibe einen Kommentar