對齊 <td> 和 <div> 在同一行

Question

我有一個帶有<td>的表，該表設置為顯示div#time2 ，其中充滿了來自數據庫[LastBuild]的時間。 在其下是包含div#time的段落，該段落填充了當前時間。 我的問題是#time2和[LastBuild]不在同一行上； [LastBuild]顯示在#time2下面。 我需要這兩行在同一行上（該段落之后的第二部分已經完成了我想要的）。

<table style="border-style:none; width:850px; border-spacing:0; border-collapse:collapse;">
    <tr>
        <td style="float:left; background-color:#000000;color:#FFFF00; width:335px; text-align:left; font-size:10;">By TrueLogic Company
            <p>Edited By International Electronic Components</p>
        </td>
        <td width="200"></td>
        <td style="float:right;background-color:#000000;color:#FFFF00; width:235px; text-align:right; font-size:10;">
            <div id="time2"></div>
            [LastBuild]
            <p>
                <div id="time" align="right" style="background-color:#000000;color:#FFFF00;"></div>
            </p>
        </td>
    </tr>
</table>

這是JavaScript的div ：

var mydate=new Date();
var year=mydate.getYear();
if (year < 1000) year+=1900;
var day=mydate.getDay();
var month=mydate.getMonth();
var daym=mydate.getDate();
if (daym<10) daym="0"+daym;
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray=new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var s=date.getSeconds();
s = s < 10 ? '0'+s : s;
var Time = "Current Time:  ";
var Text = "Last Update:  ";

document.getElementById('time').innerHTML =Time+" "+dayarray[day]+" "+montharray[month]+"/"+daym+"/"+year+" "+hours+":"+minutes+":"+s+" "+ampm; 
document.getElementById('time2').innerHTML =Text+" "+dayarray[day];

Answer 1

#time2 （一個div ）默認為display:block ，這將導致它后面的所有內容在換行符之后顯示。 為了解決這個問題，請使用以下CSS（除了您已經擁有的該元素之外）：

#time2 {
    display:inline-block;
    *display:inline;
    zoom:1;
}

我忘記了IE的舊版本。 最后兩行應注意這一點。 請參閱此答案以獲取解釋。

在我就您的問題發表評論的后續行動中，我創建了一個示例 ，說明了您的意圖。 我更改了一些標簽。 表確實是用於表格數據的，因此在這種情況下div似乎更合適。 我解釋了我在注釋中所做的所有CSS更改。 隨意使用它！ 如果合適，它會干凈得多。

更新： Microsoft聲稱 IE 5.5+（我認為它稱為IE 6）支持inline-block 。

Answer 2

刪除<p>標記b / w均為div，因為p導致換行符中斷

<Td style="float:right;background-color:#000000;color:FFFF00; width:235px; text-align:right; font-size:10;"><div id="time2"></div> [LastBuild] **<p>** <div id="time" align="right" style="background-color:#000000;color:FFFF00;"></div></td>