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

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

- Baldráni

Answer 1

您可以安全地删除<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>

参考资料:

盒模型

- Alex Char

---

太棒了！玩得不错 :) - Baldráni

很高兴能帮助到你 :) - Alex Char

Answer 2

使用绝对定位？它将会拉伸到容器的全高和全宽：

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

- Jamie Barker

Answer 3

由于绝对定位是相对于父元素的，因此您可以使用绝对定位来拉伸.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>

- dfsq

---

这个解决方案也很棒！ - Baldráni

Answer 4

只需将高度应用于.box，并从.box-wrap中删除height: 0，或者您可以删除所有.box-wrap的样式，因为height: 0和overflow: hidden会不必要地导致问题：

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

更新的演示代码

- Bhojendra Rauniyar

---

也许我没有理解你的问题。 - Bhojendra Rauniyar

我需要显示红色的div。 - Baldráni

Answer 5

您可以只使用一个 <br> 标签，然后在 CSS 中使用 line-height 属性。

HTML：

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

CSS：

p {
    line-height: 40px;
}

- MajAfy

---

我想完全删除 <br/>。 - Baldráni

Answer 6

在 .box 的 CSS 中使用 min-height，例如：

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

- Vivek Gupta

---

我无法指定盒子的高度；我编辑了我的问题。 - Baldráni

@baldrani 这是最小高度，div 的高度将会随着内容的改变而自动增长。 - Vivek Gupta