尝试使用内部div制作内联div

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>

​

最后，我希望所有的. .pinyin char和. up .char div彼此排列在一起，而.pinyin div位于顶部。

我可以把display: inline-block放在..pinyined char和.display: inline-block上，这样就可以工作了，但是我发现它的包装不好

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

示例：

注意:我编辑了这个示例，使其更接近我正在经历的内容。

àn zhào
按  照

线和Caringo Linkedin。我希望那个Caringo Linkedin出现在同一条线上，然后包装起来。

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

Answer 1

这就是引入HTML5 元素的具体目的。在<ruby>元素中，可以使用<rt>标记添加ruby注释，同时使用<rp>进行向后兼容性。

有点像

duō
 多

可以由以下代码呈现：

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

会根据<rp>括号的选择将其呈现为这样的浏览器：

多 (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

​

Answer 2

这个怎么样？

​

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

这里的代码与您展示的代码完全一样(即，两组不同的文本/具有匹配的翻译)

如果需要，可以很容易地扩展此片段以在表中添加更多文本。

​

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

​