Question

我有以下结构：

.pinyined-char {
  display: inline-block;
}

.unpinyined-char {
  display: inline-block;
}

.pinyin {
  font-size: 10 px;
  text-align: center;
}

.char {
  text-align: center;
}

  <div class="pinyined-char">
<div class="pinyin">duō</div>
<div class="char">多</div>
  </div>
  <div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">，</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">qǐng</div>
<div class="char">請</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">fǎng wèn</div>
<div class="char">訪問</div>
  </div>
  <div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char"><a href="http://www.Caringo.com">http://www.Caringo.com</a> 。 
</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">àn zhào</div>
<div class="char">按照</div>
  </div>
  <div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn： https ： //<a href="http://www.linkedin.com/company/caringo-inc-">www.linkedin.com/company/caringo-inc-</a> Twitter： https ： //twitter.com/CaringoStorage 
</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">guān yú</div>
<div class="char">關於</div>
  </div>
  <div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo Caringo</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">shè bèi</div>
<div class="char">設備</div>
  </div>
  <div class="pinyined-char">
<div class="pinyin">hé</div>
<div class="char">咊</div>
  </div>
  <div class="unpinyined-char">
<div class="pinyin"></div>
<div class="char">Caringo LinkedIn</div>
  </div>
</div>

最终，我希望所有.pinyined-char和.unpinyined-char .char div彼此并排排列，.pinyin div位于顶部

我可以通过将display: inline-block放在.pinyined-char和.unpinyined-char上来使其工作，但我发现它包装得不好

如何正确包装此包装并将所有内容内联，同时将拼音保持在.char中各个字符的顶部？

示例：

注意：我对示例进行了修改，使其更接近于所遇到的问题。我要解决的问题是在

之间

àn zhào
按  照

行和Caringo Linkedin。我希望Caringo Linkedin出现在同一行并换行。

https://jsfiddle.net/70kbtLru/11/

Answer 1

怎么样？

.pinyined-char, .unpinyined-char  {
    display: inline-block;
}
.pinyin {
    font-size: 10px;
}
.char, .pinyin {
    text-align: center;
    width: 100%
}

<div>
  <div class="pinyined-char">
    <div class="pinyin">shè bèi</div>
    <div class="char">設備</div>
  </div>
  <div class="pinyined-char">
    <div class="pinyin">hé</div>
    <div class="char">咊</div>
  </div>
  <div class="unpinyined-char">
    <div class="pinyin"></div>
    <div class="char">Caringo LinkedIn</div>
  </div>
</div>
<div>
  <div class="pinyined-char">
    <div class="pinyin">shè bèi</div>
    <div class="char">設備</div>
  </div>
  <div class="pinyined-char">
    <div class="pinyin">hé</div>
    <div class="char">咊</div>
  </div>
  <div class="unpinyined-char">
    <div class="pinyin"></div>
    <div class="char">Caringo LinkedIn</div>
  </div>
</div>

否则，这是一个表格。.，每个单词与每个字符垂直对齐。

<table>
  <tr>
    <td>shè</td>
    <td>bèi</td>
    <td>hé</td>
    <td></td>
  </tr>
  <tr>
    <td>設</td>
    <td>備</td>
    <td>咊</td>
    <td>Caringo LinkedIn</td>
  </tr>
  <tr>
    <td>shè</td>
    <td>bèi</td>
    <td>hé</td>
    <td></td>
  </tr>
  <tr>
    <td>設</td>
    <td>備</td>
    <td>咊</td>
    <td>Caringo LinkedIn</td>
  </tr>
  </table>

Answer 2

这是与您显示的代码完全相同的代码（即两组不同的文本/具有匹配的翻译）

如果需要，可以轻松扩展此代码段以在表格中添加更多文本

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
td {
  text-align: center;
}

.char,span {
    text-align: center;
    align-self: flex-end;
    padding-bottom: .3em;
    padding-left: .5em;
}

<div id="wrapper">
  <table>
    <tr>
      <td>duō</td>
    </tr>
    <tr>
      <td>多</td>
    </tr>
    </table>
    <span>,</span>
    <table>
    <tr>
      <td>qǐng</td>
      <td>fǎng wèn</td>
    </tr>
    <tr>
      <td>請</td>
      <td>訪問</td>
    </tr>
    </table>
    <div class="char">
    <a href="http://www.Caringo.com">http://www.Caringo.com</a>
    </div>
    <table>
      <tr>
        <td>àn zhào</td>
      </tr>
      <tr>
        <td>按照</td>
      </tr>
    </table>
    <div class="char">
      <a href="https://www.linkedin.com/company/caringo-inc-">Caringo LinkedIn</a>
      <a href="https://twitter.com/CaringoStorage">Twitter</a>
    </div>
<table>
  <tr>
    <td>guān yú</td>
  </tr>
  <tr>
    <td>關於</td>
  </tr>
</table>   
<div class="char">Caringo Caringo</div>
    <table>
    <tr>
      <td>shè bèi</td>
      <td>hé</td>
    </tr>
   <tr>

      <td>設備</td>
      <td>咊</td>
    </tr>
  </table>
  <div class="char">Caringo LinkedIn</div>
</div>

Answer 3

这是专门引入HTML5 <ruby>元素的目的。在<ruby>元素中，可以使用<rt>标签添加红宝石注释，同时使用<rp>来实现向后兼容。

类似

duō
 多

可以通过以下代码呈现：

<ruby>
多 <rp>(</rp><rt>duō</rt><rp>)</rp>
</ruby>

根据<rp>括号的选择，浏览器认为don’t support <ruby>会像这样渲染它：

多 (duō)

以您当前的带注释文本示例为例，HTML看起来像这样：

<ruby>
多 <rp>(</rp><rt>duō</rt><rp>)</rp>
</ruby>
，
<ruby>
請 <rp>(</rp><rt>qǐng</rt><rp>)</rp>
訪 <rp>(</rp><rt>fǎng</rt><rp>)</rp>
問 <rp>(</rp><rt>wèn</rt><rp>)</rp>
</ruby>
<a href="https://www.Caringo.com">https://www.Caringo.com</a> 。
<ruby>
按 <rp>(</rp><rt>àn</rt><rp>)</rp>
照 <rp>(</rp><rt>zhào</rt><rp>)</rp>
</ruby>
Caringo LinkedIn： <a href="https://www.linkedin.com/company/caringo-inc-">https://www.linkedin.com/company/caringo-inc-</a> Twitter： <a href="https://twitter.com/CaringoStorage">https://twitter.com/CaringoStorage</a>
<ruby>
關 <rp>(</rp><rt>guān</rt><rp>)</rp>
於 <rp>(</rp><rt>yú</rt><rp>)</rp>
</ruby>
Caringo Caringo
<ruby>
設 <rp>(</rp><rt>shè</rt><rp>)</rp>
備 <rp>(</rp><rt>bèi</rt><rp>)</rp>
咊 <rp>(</rp><rt>hé</rt><rp>)</rp>
</ruby>
Caringo LinkedIn

尝试使内部div内联div

3 个答案: