Question

我有以下代码：

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但是它并没有像我预期的那样真正起作用。

谢谢！

Answer 1

绝对定位是一种选择：

＆＃13;

controlCheckbox

＆＃13;

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

＆＃13;

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

Answer 2

这是使用纯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>

Answer 3

喜欢这个吗？

＆＃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;

显示特定SPAN下方的内容

3 个答案: