Feste Breite Layout mit einem Kind Spanning volle Bildschirmbreite

Question

Kann ich ein Layout wie auf das Bild unten zu erstellen, während die feste Breite nur auf den Behälter übergeordneten Einstellung? Ich kann auch nicht verwenden position: absolute; left: 0; right: 0; auf Voller Bildschirm Breite Kind, wie ich es nicht aus dem Fluss entfernen kann, weil es Größe ist dynamisch.

Ich kann nicht das Markup ändern.

Die einzige Lösung, die ich separat von setzt die feste Breite auf jeder fester Breite Kind denken kann, aber wie ich eine Menge von ihnen haben, das ist nicht die bequemste Lösung - Mittel eine Klasse für jedes Kind fügte hinzu, dass Ich füge in den übergeordneten Container hinzu.

Hier ist ein Beispiel Markup Sie eine Lösung veröffentlichen können.

HTML

<div class="fixed-width-container"> 
    <div class="regular-child"></div> 
    <div class="full-screen-width-child"></div> 
    <div class="regular-child"></div> 
    <div class="regular-child"></div> 
</div> 

CSS

.fixed-width-container { 
    width: <some-fixed-width>; 
} 

Answer 1

können Sie einen Versuch der Flex-Layout geben: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
div { 
 
    border: 1px solid #333; 
 
} 
 

 
.fixed-width-container { 
 
    width: 400px;/* any width set */ 
 
    margin: auto; 
 
    padding: 10px 10px 0; 
 
    background: yellow; 
 
    display: flex; 
 
    flex-flow: column; 
 
    align-items: center; 
 
} 
 

 
.fixed-width-container>div { 
 
    height: 3em; 
 
    margin-bottom: 10px; 
 
    background: lightblue; 
 
    min-width: 100%; 
 
} 
 

 
.full-screen-width-child { 
 
    width: 99vw;/* 100vw is fine too */ 
 
}

<div class="fixed-width-container"> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="full-screen-width-child">Full screen width child with dynamic contents</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
</div>

codepen to test and play with

Answer 2

Dies ist nur ein Versuch, und wahrscheinlich nicht sehr gut. Aber vielleicht wird es einige ausgeklügeltere Lösungen von anderen oder sogar von dir selbst hervorbringen.

---

Idee: negative Margen für das volle Breite Kind.

* { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 

 
body { 
 
    width: 100%; 
 
    background: #fff; 
 
} 
 

 
div { 
 
    border: 1px solid #333; 
 
    margin-bottom: 10px; 
 
} 
 

 
div:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.fixed-width-container { 
 
    width: 70%; 
 
    margin: auto; 
 
    padding: 10px; 
 
    background: LightYellow; 
 
} 
 

 
.regular-child, 
 
.full-screen-width-child { 
 
    height: 45px; 
 
    line-height: 45px; 
 
    background: LightBlue; 
 
} 
 

 
.full-screen-width-child { 
 
    margin-left: -24%; 
 
    margin-right: -24%; 
 
    background: LightGreen; 
 
}

<div class="fixed-width-container"> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="full-screen-width-child">Full screen width child with dynamic contents</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
    <div class="regular-child">Fixed-width child</div> 
 
</div>

Der problematische Teil hier ist die Dimension der negativen Margen. Wenn Sie % verwenden, bezieht sich dies auf die width der fixed-width-container. Hier wählte ich dafür. Bei einer Körperbreite von 625px (wie es der Fall für die Stack-Snippet-Vorschau ist) und eine Marge von -24%, das wäre eine negative Marge von 625px * 0.7 * 0.24 = 105px geben. Ich bin nicht sicher, was der beste Ansatz ist, dies für jede Konfiguration zu machen.