Нашел в интернете пример расположения блоков горизонтально, приспособил к своей задаче и вот что получилось:
Вот код html:
{{Describe of sound}}<br><br>
<div id="wrapper">
<div class="section">{{Letter(s) - 1}}<br>
{{Symbol - 1}}</div>
<div class="section">{{Word - 1}}<br>
{{Word_transcription - 1}}</div>
<div class="section">{{Audio letter(s) - 1}} {{Audio word - 1}}</div>
</div>
<br>
<div id="wrapper">
<div class="section">{{Letter(s) - 2}}<br>
{{Symbol - 2}}</div>
<div class="section">{{Word - 2}}<br>
{{Word_transcription - 2}}</div>
<div class="section">{{Audio letter(s) - 2}} {{Audio word - 2}}</div>
</div>
<br>
<div id="wrapper">
<div class="section">{{Letter(s) - 3}}<br>
{{Symbol - 3}}</div>
<div class="section">{{Word - 3}}<br>
{{Word_transcription - 3}}</div>
<div class="section">{{Audio letter(s) - 3}} {{Audio word - 3}}</div>
</div>
Вот код css^
#wrapper {
width:320px;
height:60px;
/* background:#EFEFEF;*/
}
.section {
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
width:98px;
}
#wrapper div:first-child {
margin-left:0px;
}
Нужно бы выровнять блоки по горизонтали, как не знаю...
Простой
Средний