Wie erzwinge ich, dass das übergeordnete Div um die Breite/Auffüllung/Rand/Box des untergeordneten Div erweitert wird?

Lesezeit: 5 Minuten

Chamäleon

Ich möchte div parent mit child div erweitern, aber ich weiß nicht, ob das möglich ist und wie es geht.

Ich bereite eine vor Geige und enthalten etwas Code.

CSS

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    max-width: 72em;
    margin: auto;
    padding: 1em;
}
div.one {
    background-color: red;
    width: 40%;
}
div.two {
    background-color: green;
    width: 120%;
}

HTML

<body>
    <div class="page">
        <div class="one">One</div>
        <div class="two">Two</div>
    </div>
</body>

Sie bitten das untergeordnete Element, breiter als sein übergeordnetes Element zu sein (Breite: 120 %). Versuchen Sie, ein CSS-Paradoxon zu erstellen?

– Patrice Levèsque

25. Juni 2013 um 7:31 Uhr
@PatriceLevesque Ich kann CSS falsch verstehen – erzähl mir mehr. Ist es unmöglich, die Breite der Eltern durch die Kinder auf diese Weise festzulegen? Die Breite wird von Eltern zu Kind berechnet (umgekehrt ist es also nicht möglich? Sollte ich die Elternbreite größer einstellen, um das Kind darin zu halten, wenn es mehr Platz benötigt (Min-Breite)?

– Chamäleon

25. Juni 2013 um 7:42 Uhr
Die Antwort auf Ihre Frage ist ja. Das padding:1em in Ihrem div.page(parent) ist dasjenige, das die Breite Ihres div.two(child) steuert. siehe diese jsfiddle jsfiddle.net/CrfaE/6

– bot

25. Juni 2013 um 8:03 Uhr
Oder was versuchen Sie zu tun, damit die Breite von div.two das Ende der übergeordneten div.page auf der rechten Seite ohne Leerzeichen erreicht? weil die folgende Antwort nach meinem Verständnis bereits richtig ist.

– bot

25. Juni 2013 um 8:11 Uhr
Darf ich übrigens fragen, warum Sie einen XHTML-Namensraum, aber einen HTML-Inhaltstyp verwenden? XHTML und HTML sollten nicht gemischt werden; es gibt zu viele deutliche unterschiede.

– Herr Lister

25. Juni 2013 um 8:17 Uhr

bot

Die Schlüssellösung für Ihr Problem ist die Verwendung display:inline-block;

HTML

body {
    background: gray;
}
div.page {
    color: white;
    background: black;
    margin: auto;
    padding: 1em;
    display:inline-block;
}
div.one {
    background-color: red;
    width: 10em;
    display:inline-block;
}
div.two {
    background-color: green;
    width: 40em;
    display:inline-block;
}

<div class="page">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>

Ich weiß, es ist alt, aber wenn Sie IE7-Unterstützung benötigen, verwenden Sie display: inline-block; *display: inline; *zoom: 1;

– S. Serpooshan

1. Januar 2017 um 5:13 Uhr
das ist, was ich brauchte … jetzt … um das WARUM zu verstehen … irgendjemand?

– Karinlynchin

5. September 2018 um 22:11 Uhr
Ein Blockelement beansprucht den horizontalen Platz, den das übergeordnete Element zu bieten hat, während ein Inline-Block den horizontalen Platz einnimmt, den es zum Anzeigen des Inhalts benötigt (sofern nicht überschrieben). Wenn der Inline-Block größer als der Elternblock ist, läuft er über. Sie können ein Blockelement erstellen, um die Inhaltsbreite durch Einstellung zu bewerten width: fit-content das ist aber nicht IE-kompatibel.

– voneiden

22. März 2020 um 17:39 Uhr

Sie können nicht % verwenden und erwarten, dass die Box überläuft, sonst endet es nie. 100 % werden zu 120 %, aber dann werden 120 % von 120 % zu .. und so weiter. Vergiss diese Idee, es kann nicht funktionieren.

Ihre CSS-Anfrage ist inkohärent.

Um zu sehen, dass ein Element breiter als das Fenster wird, muss sich einer der Eltern so verhalten können, meistens, der Inhalt läuft über und bleibt sichtbar. (html/body oder übergeordnetes Element)

soweit ich weiß nur:

display:

table
inline-table
table-row

table-cell

Kann den Container so stark wachsen lassen wie den Inhalt.

Das ist sehr interessant und nützlich zu wissen. Ich habe benutzt display: table in der Vergangenheit nur sehr spärlich

– Selbst posten

8. Juli 2018 um 10:54 Uhr

Dein Problem ist folgendes:

div.two {
        background-color: green;
        width: 120%;
}

Sie sagen dem untergeordneten Element, dass es 120 % der Breite des übergeordneten Elements entspricht, d. h. die gesamte Breite plus 20 % mehr. Machen Sie es 100% und Sie sollten das erwartete Ergebnis erhalten.

Ich kann CSS falsch verstanden haben – erzähl mir mehr. Ist es unmöglich, die Breite der Eltern durch die Kinder auf diese Weise festzulegen? Die Breite wird von Eltern zu Kind berechnet (umgekehrt ist es also nicht möglich? Sollte ich die Elternbreite größer einstellen, um das Kind darin zu halten, wenn es mehr Platz benötigt (Min-Breite)?

– Chamäleon

25. Juni 2013 um 7:43 Uhr
Es scheint sicher, als hättest du es getragen. 100 % eines Elements ist das Ganze, wenn Sie es auf mehr als 100 % setzen, ist es die gesamte Breite plus eine beliebige Zahl. Wenn Sie ein Glas mit Wasser füllen, aber 120 % des Volumens des Glases haben, füllt es sich bis ganz nach oben und dann werden die restlichen 20 % überlaufen. 🙂

– Kyle

25. Juni 2013 um 7:45 Uhr
Das bedeutet, dass ich die Elternbreite auf zB 80em setzen sollte, wenn ich Kinder mit einer Breite von weniger als 80em behalten möchte – und es werden immer 81em Kinder überlaufen (nicht die Größe der Eltern ändern).

– Chamäleon

25. Juni 2013 um 7:50 Uhr
Hängt von Ihrer EM-Einstellung ab, aber ja. Es hängt auch von den Stilen ab, die Sie auf das übergeordnete Element angewendet haben. Standardmäßig sollten sie ihre Größe ändern, um ihre Eltern zu enthalten, aber wenn Sie eine festgelegte Breite oder einige Überlaufeigenschaften haben, wird dies verhindert.

– Kyle

25. Juni 2013 um 8:04 Uhr
@Chameleon Das ist verwirrend. Welche Breite soll das Kind haben? 80em? Wenn ja, dann ist es einfach: eben float das Elternteil, dann passt es sich an die Breite seiner Kinder an. Aber das ist bei einer Kinderbreite unmöglich 120%. Vergiss die 120%. Es wird nicht funktionieren.

– Herr Lister

25. Juni 2013 um 8:04 Uhr

11453500cookie-checkWie erzwinge ich, dass das übergeordnete Div um die Breite/Auffüllung/Rand/Box des untergeordneten Div erweitert wird?

#CSS #html