所以,這是我的問題;我正在設置一個div
,它正好位於table
的旁邊。我希望他們並排排隊。就像它是一樣的,它們與上面的所有其他部分相對應。看看我的願景板下面:表格和div定位不對齊
除了其實我是想將「簽名編輯器」是在頂部(照片問題),而不是底部。所以這就是我想要的。這一切都需要並排排列。但是,實際上是這樣的:
正如您所看到的,「簽名編輯器」文本位於表格的上方,而不是像我希望的那樣排列起來(請參閱我的願景板)。
這裏是我的代碼:
table {
display: inline-block;
}
#signatureEditorText {
font-family: 'Source Sans Pro', sans-serif;
}
#image {
width: 125px;
height: 125px;
border-radius: 50%;
margin-top: -45px;
}
.spacer {
width: 15px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
color: orange;
margin-top: -40px;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
margin-top: -12px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
margin-top: -3px;
}
.otherText {
color: seaGreen;
}
#emailAddress {
margin-top: 5px;
}
#extra1, #extra2, #extra3, #extra4, #extra5, #extra6 {
white-space: pre-wrap;
}
<div id = "signatureEditorText"><h2>Signature Editor</h2></div>
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image" title = "Picture to be displayed">
</td>
<td class = "spacer"></td>
<td rowspan = "4">
<hr>
</td>
<td class = "spacer"></td>
</tr>
<tr>
<td><center><div id = "fullName">Billy Staples</div></center></td>
</tr>
<tr>
<td><center><div id = "job"><i>Programmer</i></div></center></td>
</tr>
<tr>
<td><center><div id = "jobLocationText">at <b id = "jobLocation">My Company</b></div></center></td>
</tr>
</table>
<table id = "contactInfo" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td><div id = "emailAddress"><span class = "otherText">Email: </span><span id = "emailAddressText">[email protected]</span></div></td>
</tr>
<tr>
<td><div id = "phoneNumber"><span class = "otherText">Phone: </span><span id = "phoneNumberFirst">111</span>-<span id = "phoneNumberSecond">222</span>-<span id = "phoneNumberThird">3333</span></div></td>
</tr>
<tr>
<td><div id = "officePhoneNumber"><span class = "otherText">Office Phone: </span><span id = "officePhoneNumberFirst">444</span>-<span id = "officePhoneNumberSecond">555</span>-<span id = "officePhoneNumberThird">6666</span></div></td>
</tr>
<tr>
<td><div id = "address"><span class = "otherText">Address: </span><span id = "addressText">1379 Philadelphia Avenue</span></div></td>
</tr>
<tr>
<td><div id = "website"><span class = "otherText">Website: </span><span id = "websiteText">example.com</span></div></td>
</tr>
<tr>
<td><div id = "extra1"><span class = "otherText" id = "extra1Label"></span><span id = "extra1Text"> </span></div></td>
</tr>
<tr>
<td><div id = "extra2"><span class = "otherText" id = "extra2Label"></span><span id = "extra2Text"> </span></div></td>
</tr>
<tr>
<td><div id = "extra3"><span class = "otherText" id = "extra3Label"></span><span id = "extra3Text"> </span></div></td>
</tr>
<tr>
<td><div id = "extra4"><span class = "otherText" id = "extra4Label"></span><span id = "extra4Text"> </span></div></td>
</tr>
<tr>
<td><div id = "extra5"><span class = "otherText" id = "extra5Label"></span><span id = "extra5Text"> </span></div></td>
</tr>
<tr>
<td><div id = "extra6"><span class = "otherText" id = "extra6Label"></span><span id = "extra6Text"> </span></div></td>
</tr>
</table>
而且它是一個here的jsfiddle。
此外,以下是我嘗試過的一些方法:display: inline;
,display: inline-block;
,display: block;
。
謝謝!
ü徵收電子郵件?爲什麼你使用'table'? –