Wie simulieren mehrere <br/> Tag mit CSS

Question

Ich verbrachte einige Zeit auf eine Frage, wenn ich mit einer lustigen Lösung kam, aber nicht wirklich abgeschlossen.

Siehe die Fiddle und versuchen Sie, die <br/> Tag zu löschen.

Die Idee ist auch, den gleichen Effekt zu bekommen (rote div angezeigt) aber ohne diese Lösung relativ schrecklich.

Also hier ist meine Frage: Wie simuliere ich <br/> Tags mit CSS oder schließlich Js?

Nur noch einige Schwierigkeiten: Sie können den Wrapper nicht berühren.

Hier ist der HTML-Code:

<div class="wrapper"> 
    <p>Some text and descriptions</p> 
    <div class="widget box-wrap"> 
     <div class="box"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div> 
    </div> 
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p> 
</div> 

Hier ist die CSS:

.wrapper { 
    width:300px; 
    display:block; 
    position:relative; 
    overflow:hidden; 
    background-color:gray; 
} 
.widget { 
    width:300px; 
    height:300px; 
    display:block; 
    position:relative; 
    background-color:green; 
} 
.box { 
    background-color:red; 
    visibility:visible; 
} 

.box-wrap { 
    overflow: hidden; 
    height: 0; 
    padding-bottom: 60%; 
} 
.box-wrap div { 
    max-width: 100%; 
} 

Answer 1

Sie .box mit Position strecken kann absolut, da sie an die Mutter relativ ist. Auf diese Weise können Sie sicher sein, dass der gesamte Bereich des übergeordneten Containers belegt ist.

.wrapper { 
 
    width:300px; 
 
    display:block; 
 
    position:relative; 
 
    overflow:hidden; 
 
    background-color:gray; 
 
} 
 
.widget { 
 
    width:300px; 
 
    height:300px; 
 
    display:block; 
 
    position:relative; 
 
    background-color:graeen; 
 
} 
 
.box { 
 
    background-color:red; 
 
    visibility:visible; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
} 
 
.box-wrap { 
 
    overflow: hidden; 
 
    height: 0; 
 
    padding-bottom: 60%; 
 
} 
 
.box-wrap div { 
 
    max-width: 100%; 
 
}

<div class="wrapper"> 
 
    <p>Some text and descriptions</p> 
 
    <div class="widget box-wrap"> 
 
     <div class="box"></div> 
 
    </div> 
 
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p> 
 
</div>

Answer 2

Nur die Höhe gelten 100% in .box zu sein und die height: 0 von .box-wrap entfernen oder Sie können alle Arten von entfernen .box-wrap was das Problem wegen height: 0 und overflow: hidden:

wirklich unnötig verursacht

updated fiddle

Answer 3

Sie können nur ein <br>-Tag verwenden und dann line-height in CSS verwenden.

HTML:

<p> 
Lorem ipsum <br> Another line 
</p> 

CSS:

p { 
    line-height: 40px; 
} 

Answer 4

Verwenden min-height in .box css wie:

.box { 
    background-color:red; 
    visibility:visible; 
    min-height:100px; 
} 

Answer 5

Sie sicher <br /> und padding verwenden entfernen können. Wenn für den Inhaltsbereich ein Hintergrund, eine Farbe oder ein Bild festgelegt ist, erstreckt sich dies auf das Padding. Aus diesem Grund können Sie sich das Padding als Erweiterung des Inhalts vorstellen. Beispielsweise unter Verwendung 'Padding-top':

.wrapper { 
 
    width: 300px; 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: gray; 
 
} 
 
.widget { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: block; 
 
    position: relative; 
 
    background-color: green; 
 
} 
 
.box { 
 
    background-color: red; 
 
    visibility: visible; 
 
    padding-top: 180px;/*add padding top*/ 
 
} 
 
.box-wrap { 
 
    overflow: hidden; 
 
    height: 0; 
 
    padding-bottom: 60%; 
 
} 
 
.box-wrap div { 
 
    max-width: 100%; 
 
}

<div class="wrapper"> 
 
    <p>Some text and descriptions</p> 
 
    <div class="widget box-wrap"> 
 
    <div class="box"></div> 
 
    </div> 
 
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p> 
 
</div>

Referenz:

Box model

Answer 6

Verwenden absolute Positionierung?Es wird auf die volle Höhe und Breite des Behälters strecken:

.wrapper { 
 
    width: 300px; 
 
    display: block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    background-color: gray; 
 
} 
 
.widget { 
 
    width: 300px; 
 
    height: 300px; 
 
    display: block; 
 
    position: relative; 
 
    background-color: green; 
 
} 
 
.box { 
 
    background-color: red; 
 
    visibility: visible; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.box-wrap { 
 
    overflow: hidden; 
 
    height: 0; 
 
    padding-bottom: 60%; 
 
} 
 
.box-wrap div { 
 
    max-width: 100%; 
 
}

<div class="wrapper"> 
 
    <p>Some text and descriptions</p> 
 
    <div class="widget box-wrap"> 
 
    <div class="box"></div> 
 
    </div> 
 
    <p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p> 
 
</div>