Trying to make inline divs with internal divs - html

Question

I've got the following structure:
.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">http://www.Caringo.com 。
</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 ： //www.linkedin.com/company/caringo-inc- 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>
Ultimately, I want all of the .pinyined-char and .unpinyined-char .char divs to line up next to each other, with the .pinyin divs on top
I can sorta get this working by putting display: inline-block on .pinyined-char and .unpinyined-char, but I find that it doesn't wrap well
How do I make this wrap properly and put everything inline, while keeping pinyin on top of the respective characters in .char?
Example:
NOTE: I have edited the example to be much closer to what I am experiencing. The problem I am trying to solve is between the
àn zhào
按 照
line and the Caringo Linkedin. I would like that Caringo Linkedin to appear on the same line and wrap.
https://jsfiddle.net/70kbtLru/11/

Answer 1

This is specifically what the HTML5 <ruby> element was introduced for. In a <ruby> element you can add ruby annotations with the <rt> tag, while using <rp> for backwards compatibility.
Something like
duō
多
can be rendered by this code:
<ruby>
多 <rp>(</rp><rt>duō</rt><rp>)</rp>
</ruby>
Browsers that don’t support <ruby> will render it like this, depending on the choice of <rp> parentheses:
多 (duō)
Taking your current example of annotated text, the HTML would look something like this:
<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>
https://www.Caringo.com 。
<ruby>
按 <rp>(</rp><rt>àn</rt><rp>)</rp>
照 <rp>(</rp><rt>zhào</rt><rp>)</rp>
</ruby>
Caringo LinkedIn： https://www.linkedin.com/company/caringo-inc- Twitter： https://twitter.com/CaringoStorage
<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

How about this?
.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>
Otherwise, here it is with a table.. and each word vertically aligned to each character.
<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

This here was with the code exactly like you showed (ie, two different sets of texts / with matching translations)
This snippet can easily be extended to add more text in the table, if needed
#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">
http://www.Caringo.com
</div>
<table>
<tr>
<td>àn zhào</td>
</tr>
<tr>
<td>按照</td>
</tr>
</table>
<div class="char">
Caringo LinkedIn
Twitter
</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>