html在表格中排列div

时间:2017-01-09 18:20:24

标签: html css

我需要一点手。所以基本上我试图在桌子内安排div但由于某种原因我不能。我已经尝试过添加tr,td了,但它现在一直在搞乱我的代码以获得一些帮助。

以下是我所做的示例图片。 样本图片

enter image description here

正如您所见,计时器在标题或名称之前首先出现。所以我想改变自己的立场。我希望标题首先出现在计时器之前。

现在这是我想要的样本图片

enter image description here

下面是第一张图片样本的代码。



<table width="214" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top: 10px; ">
<tr>
<td height="48" style="background-image:url(template/<?=$core['config']['template'] ?>/images/eventsmenu.png) "><div class="m_title"></div></td>
</tr>
<tr>
<td style="background-image:url(template/<?=$core['config']['template'] ?>/images/bg_snbmid.png); background-repeat:repeat-y; "><ul class="snb_1dep">

<table width="95%" height="119" border="0" cellpadding="0" cellspacing="0" class="gen_table">
<tr>
<td height="69" align="center" valign="top" class="n_back">
<table width="200" border="0" align="center" cellpadding="2" cellspacing="0">

        <div id="events"> 
          <script type="text/javascript" src="template/<?=$core['config']['template'] ?>/js/time.js"></script> 
          <script type="text/javascript">MuEvents.init('00:00:00');</script> 
	</div>

</table>
</td>
</tr>
<tr>
<td class="n_foot">&nbsp;</td>
</tr>
</table> 
&#13;
&#13;
&#13;

如果你想看,这是css。

&#13;
&#13;
/* Styles */

#left_box_body {
width: 220px;
margin-left: 80px;
margin-top: -100px;
margin-bottom: -90px;
}



#events dt {
  padding: 1px 2px;
  border-radius: 2px;
  margin: 2px 0;
}

#events span {
  display:block;
  font-size:11px;
}

#events {
  margin:5px;
  width: 200px;
  padding-top: 4px;
  padding-left: 10px;
}

.rightfloat { float: right; }

/*
  MUCore CSS Start
*/
&#13;
&#13;
&#13;

如果您正在寻找定时器代码,请在下面进行操作。

&#13;
&#13;
var MuEvents = {};
MuEvents.text = [
        [lang[0], lang[1]],
        [lang[2], lang[3]]
];

MuEvents.sked = [
  ['Blood Castle',        0,      '02:30', '04:30', '06:30', '08:30', '10:30', '12:30', '14:30', '16:30', '18:30', '20:30', '22:30', '22:30'],
  ['Chaos Castle',        0,      '02:40', '04:40', '06:40', '08:40', '10:40', '12:40', '14:40', '16:40', '18:40', '20:40', '22:40', '22:40'],
  ['Devil Square',        0,      '01:00', '03:00', '05:00', '07:00', '09:00', '11:00', '13:00', '15:00', '17:00', '19:00', '21:00', '23:00'],
  ['Illusion Temple',     0,      '01:20', '05:20', '09:20', '13:20', '17:20', '20:20', '21:20', '23:20'],
  ['Happy Hour',     	  0,      '12:00'],
  ['BlueEvent',     	  0,      '10:35', '12:05', '13:25', '15:07', '18:25'],
  ['White Wizard',        1,      '13:00', '19:00'],
  ['Golden Invasion',     1,      '23:23', '18:25', '00:00', '06:00', '20:00', '14:05'],
  ['Red Dragon Invasion', 1,      '14:00', '20:00'],
  ['Loren Deep',     	    0,		  '20:00']
];

MuEvents.init = function (e) {

        if (typeof e == "string") 
        var g = new Date(new Date().toString().replace(/\date('H')+:\date('i')+:\date('s')+/g, e));
        var f = (typeof e == "number" ? e : (g.getHours() * 60 + g.getMinutes()) * 60 + g.getSeconds()), q = MuEvents.sked, j = [];       
        
        for (var a = 0; a < q.length; a++) {
                var n = q[a];
                for (var k = 2; k < q[a].length; k++) {
                        var b = 0, p = q[a][k].split(":"), o = (p[0] * 60 + p[1] * 1) * 60, c = q[a][2].split(":");
                        if (q[a].length - 1 == k && (o - f) < 0) b = 1;
                        var r = b ? (1440 * 60 - f) + ((c[0] * 60 + c[1] * 1) * 60) : o - f;
                        if (f <= o || b) {
                                var l = Math.floor((r / 60) / 60), l = l < 10 ? "0" + l : l, d = Math.floor((r / 60) % 60), d = d < 10 ? "0" + d : d, u = r % 60, u = u < 10 ? "0" + u : u;
                                j.push('<dt class="event">' + (l == 0 && !q[a][1] && d < 5 ? '<img src="template/default/images/online.png" />' : '') + '<b class="rightfloat">' + q[a][b ? 2 : k] + "</b><b>" + n[0] + '</b><span><div class="rightfloat">' + (l + ":" + d + ":" + u) + "</div>" + (MuEvents.text[q[a][1]][+(l == 0 && d < (q[a][1] ? 1 : 5))]) + "</span>");
                                break;
                        };
                };
        };
        document.getElementById("events").innerHTML = j.join("");
        setTimeout(function () {
                MuEvents.init(f == 86400 ? 1 : ++f);
        }, 1000);
};
&#13;
&#13;
&#13;

我不太确定,但是我认为这个问题在某处?

&#13;
&#13;
<table width="200" border="0" align="center" cellpadding="2" cellspacing="0">

        <div id="events"> 
          <script type="text/javascript" src="template/<?=$core['config']['template'] ?>/js/time.js"></script> 
          <script type="text/javascript">MuEvents.init('00:00:00');</script> 
	</div>

</table>
&#13;
&#13;
&#13;

编辑HTML

&#13;
&#13;
<div id="events"><dt class="event"><b class="rightfloat">02:30</b><b>Blood Castle</b><span><div class="rightfloat">03:22:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">02:40</b><b>Chaos Castle</b><span><div class="rightfloat">03:32:35</div>Starts at</span></dt>
  <dt
  class="event"><b class="rightfloat">01:00</b><b>Devil Square</b><span><div class="rightfloat">01:52:35</div>Starts at</span>
    </dt><dt class="event"><b class="rightfloat">23:20</b><b>Illusion Temple</b><span><div class="rightfloat">00:12:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">12:00</b><b>Happy Hour</b><span><div class="rightfloat">12:52:35</div>Starts at</span></dt>
    <dt
    class="event"><b class="rightfloat">10:35</b><b>BlueEvent</b><span><div class="rightfloat">11:27:35</div>Starts at</span>
      </dt><dt class="event"><b class="rightfloat">13:00</b><b>White Wizard</b><span><div class="rightfloat">13:52:35</div>Starts at</span></dt><dt class="event"><b class="rightfloat">23:23</b><b>Golden Invasion</b><span><div class="rightfloat">00:15:35</div>Starts at</span></dt>
      <dt
      class="event"><b class="rightfloat">14:00</b><b>Red Dragon Invasion</b><span><div class="rightfloat">14:52:35</div>Starts at</span>
        </dt><dt class="event"><b class="rightfloat">20:00</b><b>Loren Deep</b><span><div class="rightfloat">20:52:35</div>Starts at</span></dt>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案
相关问题