Align часы горизонтально на веб-странице

Question

Я хочу часы, отображающие различные часовые пояса на веб-странице, что я нахожусь designing.For это, я обволакивает JavaScript файлы из Webiste называется qlock.The HTML код выглядит следующим образом:

<script type="text/javascript"> 
qlock_city_name="Adelaide"; 
qlock_gmt_offset=9.5; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
</script> 
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script> 

<script type="text/javascript"><!-- 
qlock_city_name="Melbourne"; 
qlock_gmt_offset=10; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
//--></script> 
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script> 

Что это такое - это показать часы Аделаиды и Мельбурна один за другим. Есть ли способ показать их горизонтально прямо рядом друг с другом?

Answer 1

Check this Fiddle

Оберните часы с ДИВ и дать поплавок к нему

<div class="left"><script type="text/javascript"> 
qlock_city_name="Adelaide"; 
qlock_gmt_offset=9.5; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
</script> 
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script> 
    </div> 
<div class="left"> 
<script type="text/javascript"><!-- 
qlock_city_name="Melbourne"; 
qlock_gmt_offset=10; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
//--></script> 
<script type="text/javascript" src="http://www.qlock.com/live/qlock.js"></script> 
    </div> 

CSS

.left { 
    float:left; 
} 

Answer 2

вы можете установить свойство CSS на ваших часах плавать влево

#qlock1, #qlock2{ 
    float: left; 
} 

demo here

P.S. вы можете установить общий класс для всех часов и не беспокоиться о каждом id в своем css

Answer 3

Моим способом было бы разместить скрипты внутри простой таблицы;

<table style="table-layout:fixed;width:600px;"> 
    <tr height="30"> 
    <td width="150"><script type="text/javascript"><!-- 
qlock_city_name="Melbourne"; 
qlock_gmt_offset=10; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
//--></script> 
<script type="text/javascript" src="qlock.js"></script> 
</td> 
    <td width="200"><script type="text/javascript"> 
qlock_city_name="Adelaide"; 
qlock_gmt_offset=9.5; 
qlock_bg_color="#000000"; 
qlock_text_color="#ffffff"; 
qlock_dst_week1=1; 
qlock_dst_dow1=7; 
qlock_dst_month1=10; 
qlock_dst_week2=1; 
qlock_dst_dow2=7; 
qlock_dst_month2=4; 
</script> 
<script type="text/javascript" src="qlock.js"></script> 
</td> 
    <td width="250">CSS table layout cell 3</td> 
    </tr> 
</table>