显示特定SPAN下方的内容

时间:2017-01-18 13:51:49

标签: html css

我有以下代码:

for elm in soup.select("td.listtable_1 a[target=_blank]"):
    print(elm.get_text())

我的结果只是纯粹的

<div>
  <span class="red">TEXT 1</span>
  <span class="blue">TEXT 2</span>
  <span class="yellow">TEXT 3</span>
</div>

我想在2-nd span(TEXT2)之下添加一些文本而不对后续元素进行任何更改。

所以最终结果必须是那样的

TEXT1 TEXT2 TEXT3

我该怎么做?

我试图为TEXT 2设置display:block但是它并没有像我预期的那样真正起作用。

谢谢!

3 个答案:

答案 0 :(得分:1)

绝对定位是一种选择:

&#13;
&#13;
controlCheckbox
&#13;
.blue { position: relative; }
.blue span { position: absolute; top: 1em; left: 0; white-space: pre; }
&#13;
&#13;
&#13;

但请注意,如果中间跨度(TEXT 2)太靠近视口的右角,则内部跨度中的内容可能会被剪切掉。取决于具体情况,这是否是一个交易破坏者。

答案 1 :(得分:1)

这是使用纯CSS并添加标题作为span属性的另一个解决方案。

定义::before伪元素,绝对定位并包含数据属性值。

.blue::before{
  content: attr(data-text);
  position: absolute;
  margin-top: 1em;
}
<div>
  <span class="red">TEXT 1</span>
  <span class="blue" data-text="HELLO WORLD APP">TEXT 2</span>
  <span class="yellow">TEXT 3</span>
</div>

答案 2 :(得分:0)

喜欢这个吗?

&#13;
&#13;
.red {
  background-color: red;
}

.blue {
  background-color: blue;
  position: relative;
}

.yellow {
  background-color: yellow;
}

.hello {
  position: absolute;
  background-color: green;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  min-width: 200px;
}
&#13;
<div>
  <span class="red">TEXT 1</span>
  <span class="blue">
    TEXT 2
    <span class="hello">HELLO WORLD APP</span>
  </span>
  <span class="yellow">TEXT 3</span>
</div>
&#13;
&#13;
&#13;