Question

所以，这是我的问题;我正在尝试定位div旁边的table。我希望他们并排排队。就像它一样，它们与其余部分上面的文本排列在一起。看看我的愿景板如下：

除了我实际上希望“签名编辑器”这个词位于顶部（照片问题）而不是底部。这就是我想要的。这一切都要排成一列。但是，这是实际的：

正如您所看到的，“签名编辑器”文本位于表格之上，而不是像我希望的那样排列（参见我的愿景板）。

这是我的代码：

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@domain.com</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>

它的JSFiddle是here。

此外，我尝试了以下一些方法：display: inline;，display: inline-block;，display: block;。

谢谢！

Answer 1

所以你希望你的文字显示在你的桌子的左边，在顶部，以便它与头像一致？只需在float: left：

上设置#signatureEditorText即可实现这一目标

＆＃13;

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;
}

＆＃13;

<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@domain.com</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>

＆＃13;

希望这有帮助！：）

Answer 2

我会让父display: flex;将2个元素放在一行中，默认情况下与flex-start对齐，然后将margin: 0添加到h2

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@domain.com</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>

表和div定位没有排队

2 个答案: