垂直对齐表格与div

时间：2015-06-10 20:41:33

标签： html css

我有两个元素，一个表和一个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中将一个放在另一个之前时，它会推动另一个，就像这样：

The situation

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

3 个答案:

答案 0 :(得分：2)

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

根据css，两个元素的屏幕总宽度不足。两个元素的margin-left占据屏幕的100％。请查看CSS中的Box model。

CSS也格格不入。

答案 1 :(得分：1)

只需将表浮动到左侧，然后从div的CSS中删除第一行（缺少分号的那一行）。

＆＃13;
＆＃13; 
.LogoDiv {
  
  -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 {
  float:left;
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我对你想要它们的位置感到有点困惑，但是将表格包裹在一个包含的div中，可以帮助定位它 jsfiddle

HTML 

<div class="tableholder">
<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>


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

和CSS 

.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;
}
.tableholder{float:left;}
相关问题
最新问题