1. 首页
  2. 问答
  3. 使用div垂直对齐表格

使用div垂直对齐表格

2015-06-10 210 views
0

我有两个元素，一个表格和一个div。使用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

这是为什么，以及如何使它们一致？

来源

2015-06-10 A. Abramov

回答

2

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

根据CSS，屏幕的总宽度是不够的两个元素。这两个元素的margin-left占据屏幕的100％。请检查CSS中的Box model。

该CSS也格式不正确。

来源

2015-06-10 21:03:04 Pratap

+0

我明白了，谢谢。 –

1

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

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

来源

2015-06-10 20:55:40

+0

这并没有改变任何东西。 ：/ 你需要任何其他部分的CSS？ –

+0

噢......在这种情况下，你没有描述你的问题太好。我认为问题在于桌子和标识应该垂直放置在相同的位置，桌子在左边，标识在右边。在您的摘录中，徽标从桌子下方开始。 –

1

我有点困惑如何你想他们定位，但是包裹表中包含分区，可以帮助其定位 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>

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

来源

2015-06-10 20:59:14 MintWelsh

+0

这并没有太大的改变...但显然我的整个CSS是错误的。 ：/谢谢你（： –

相关问题

 相关问题