html - 将表格与 div 垂直对齐

Question

我有两个元素，一个表格和一个 div。

.LogoDiv {
  clear: both float: right;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  left: 500px;
  top: 100px;
  width: 200px;
  height: 300px;
  margin-top: 5%;
  margin-left: 85%;
  background-color: #003366;
}
.Logo {
  margin-top: 8%;
  margin-bottom: 8%;
  height: 84%;
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.SubHeadTable {
  clear: both;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
  margin-left: 15% margin-right: 15% margin-top: 20px;
  margin-bottom: 10px;
  background-color: #003366;
}
.SubHeadTitle {
  font-family: 'HurtMold', Fallback, sans-serif;
  color: #219c78;
  font-size: 28px;
}
.SubHeadText {
  font-family: 'Oregon', Fallback, sans-serif;
  color: 28a999;
  font-size: 18px;
}
.SubHeadTableRow {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.SubHeadTableCell {
  margin: 2px;
}

<table class="SubHeadTable">
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
  <tr class="SubHeadTableRow">
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
    <td class="SubHeadTableCell">
      <div class="SubHeadTitle">
        This is a title.
      </div>
      <br>
      <div class="SubHeadText">
        This is a text which relates to the title.
        <br>It explains the title further,
        <br>And could include various other elements.
        <br>
      </div>
    </td>
  </tr>
</table>


<div class="LogoDiv">
  <img src="http://orig07.deviantart.net/312a/f/2010/241/c/3/my_logo_by_hamza_design-d2xjc1a.jpg" class="Logo">
</div>

我想将 div 和表格放在同一行，但我做不到。每当我在 HTML 中将一个放在另一个之前时，它会将另一个向下推，如下所示:

为什么会这样，如何让它们对齐？

Answer 1

在使用 display:inline 或 float:left 属性之前，元素 的样式 margin-left: 85%; .LogoDiv 和 margin-left: 15% margin-right: 15% for .SubHeadTable 必须重新考虑。

根据 css，屏幕的总宽度不足以容纳这两个元素。这两个元素的 margin-left 占据了 100% 的屏幕。请查看 Box model在 CSS 中。

CSS 也有问题。