Question

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

请参阅 Fiddle 并尝试删除<br/>标记。

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

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

还有一些困难：你无法触摸包装。

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

只需在.box中将高度应用为100％，然后从height: 0移除.box-wrap，或者删除所有.box-wrap样式，这实际上是不必要的问题因为height: 0和overflow: hidden：

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

updated fiddle

Answer 2

您可以安全地删除<br />并使用padding。当内容区域上设置了背景，颜色或图像时，这将扩展到填充，这就是为什么您可以将填充视为扩展内容的原因。例如，使用'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>

<强>参考：

Box model

Answer 3

使用绝对定位？它会伸展到容器的整个高度和宽度：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 4

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 5

您只能使用一个<br>代码，然后在css中使用line-height。

HTML：

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

CSS：

p {
    line-height: 40px;
}

Answer 6

在.box css中使用min-height，如：

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

如何用CSS模拟多个标签

6 个答案: