javascript - 如何用CSS模拟多个<br/>标签

Question

当我想出一个有趣的解决方案但没有真正最终确定时，我花了一些时间在一个问题上。

参见 Fiddle 并尝试删除 <br/>标签。

这个想法也得到了同样的效果(显示红色div)但是没有使用这个解决方案相对可怕。

所以这是我的问题:我如何模拟 <br/>带有 CSS 或最终 Js 的标签？

只是有些困难:你不能触摸 wrapper 。

这是 HTML 代码:

<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>

这是 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

您可以使用绝对位置拉伸(stretch) .box，因为它是相对于父级的。这样您就可以确保它占用父容器的整个空间。

.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>