Question

使用CSS可以显示两个单词“Manden”和“Kvinden”，以及同一行上的curley括号，如图所示吗？有谁知道网站在哪里寻找解决方案？

这是1811年的丹麦诗歌。一幅形象不会;必须可以搜索文本。这是我的xml代码：

<lg>
   <l>Naar det seer, hvordan med Helvedkulde</l>
   <l>Læses uopløselige Baand,</l>
   <l>Seer før <span><span rend="top">Manden</span> <span rend="down">Kvinden</span></span> lagdes under,</l>
(...)
</lg>

See the printed version here:

Answer 1

Codepen http://codepen.io/noobskie/pen/zvpKvd

可以使用绝对位置（可能还有其他一些方法）继续使用大括号开始我可能只使用:after和content然后只是搞乱定位。

＆＃13;

.wordContainer {
  position: relative;
  display: inline-block;
  width: 50px;
  /*whatever dimensions you want*/
  top: 8px;
}
.top {
  position: absolute;
  top: 0px;
}
.down {
  position: absolute;
  top: 20px;
}

＆＃13;

<lg>
  <l>Naar det seer, hvordan med Helvedkulde</l>
  <l>Læses uopløselige Baand,</l>
  <l>Seer før
    <span class="wordContainer">
      <span rend="top">Manden</span>
      <span rend="down">Kvinden</span>
    </span>&nbsp; lagdes under,</l>
  (...)
</lg>

＆＃13;

Answer 2

以下是使用sup / sub的示例。

span {
  position: relative;
}
sup {
  position: relative;
  margin-right: 14px;
  top: -1px;
}
sub {
  position: absolute;
  left: 0;  
  top: -8px;
}
sub:after {
  content: "}";
  font-size: 240%;
  top: -5px;
  position: relative;
}

<lg>
  <l>Naar det seer, hvordan med Helvedkulde</l>
  <l>Læses uopløselige Baand,</l>
  <l>Seer før <span><sup>Manden </sup><sub>Kvinden</sub></span> lagdes under,</l>
  (...)
</lg>

Answer 3

我的解决方案可能有点晚了，但我无法帮助，但认为需要使用绝对定位的替代方案。这适用于我用类似布局制作的徽标。创建一个容器并向左浮动三个框。方框一包含一个支架，方框2包含您的文本，方框三包含您的右括号。

<!DOCTYPE html>

<head>
    <style>

        .logo {
            width: auto;
            height: 100px;
            background: #ffffff;
            float: left;
        }

        .bracket {
            clear: none;
            float: left;
            font-size: 30px;
        }

        .bracket h1 {
            clear: left;
            float: left;
            margin: 0;
            padding: 0;
        }

        .title {
            clear: none;
            float: left;
        }

        .title h1 {
            clear: left;
            float: left;
            margin: 0;
            padding: 0;
        }

    </style>
</head>



<body>
    <div class="logo">
        <div class="bracket">
            <h1>{</h1>
        </div>
        <div class="title">
            <h1>test</h1>
            <h1>word</h1>
        </div>
        <div class="bracket">
            <h1>}</h1>
        </div>
    </div>


</body>

如何在同一条线上放两个字，一个在另一个上面，还有一个curley括号？

3 个答案: