2017-06-21 30 views
0

所以,這是我的問題;我正在設置一個div,它正好位於table的旁邊。我希望他們並排排隊。就像它是一樣的,它們與上面的所有其他部分相對應。看看我的願景板下面:表格和div定位不對齊

Text Rest

除了其實我是想將「簽名編輯器」是在頂部(照片問題),而不是底部。所以這就是我想要的。這一切都需要並排排列。但是,實際上是這樣的: Full signature

正如您所看到的,「簽名編輯器」文本位於表格的上方,而不是像我希望的那樣排列起來(請參閱我的願景板)。

這裏是我的代碼:

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;

謝謝!

+0

ü徵收電子郵件?爲什麼你使用'table'? –

回答

1

所以你希望你的文本顯示在你的桌子左邊,並在頂部,以便它與頭像對齊?這可以通過簡單的設置#signatureEditorTextfloat: left來實現:

table { 
 
    display: inline-block; 
 
} 
 
#signatureEditorText { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    float: left; 
 
} 
 
#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>

希望這有助於! :)

0

我會讓家長display: flex;把2元一排,對準flex-start默認情況下,再加入margin: 0h2

body { 
 
    display: flex; 
 
} 
 

 
h2 { 
 
    margin: 0; 
 
} 
 

 
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>

+0

我試圖讓文本「簽名編輯器」在頂部而不是底部。 – CyanCoding

+0

@CyanCoding哦,對不起,我正在關閉圖片,錯過了你說你想要頂部文本的部分。更新 - 更好? –