块元素未垂直对齐
[英]Block Elements Not Vertically Aligning
问题描述
I'm currently trying to develop a website. 
我目前正在尝试开发一个网站。 At the moment I'm trying to get the design down, but its giving me quite a tough time. 目前，我正在尝试降低设计水平，但这给了我一段艰难的时期。
I have 5 div's. 我有5个div。 Each one contains two span's, column1 and column2. 每个都包含两个跨度，即column1和column2。 The div's are block and the span's are inline-block. div是块，而span是内联块。 However, for some reason the div's don't want to align vertically. 但是，由于某些原因，div不想垂直对齐。 Any help is appreciated. 任何帮助表示赞赏。 Also, another thing. 另外，另一件事。 Some of the span's inside the div's were replaced with div's. div内的部分跨度已替换为div。 I did this because I planned on using block elements inside of those particular areas and to do that and still validate they had to be div's, not span's. 我之所以这样做，是因为我计划在这些特定区域内使用块元素，并且这样做并仍然验证它们必须是div而不是span。
Below is my current code: 下面是我当前的代码：
.header { color: #AEC6CF; font-family: gabriola; font-weight: 900; font-size: 50px; position: relative; } /* ID */ #row1 { width: 98%; height: 15%; position: absolute; display: block; } #row2 { width: 98%; height: 2.5%; position: absolute; display: block; } #row3 { width: 98%; height: 70%; position: absolute; display: block; } #row4 { width: 98%; height: 2.5%; position: absolute; display: block; } #row5 { width: 98%; height: 7.25%; position: absolute; display: block; } #column1 { border-bottom: 3px solid black; border-right: 3px solid black; width: 20%; height: 100%; left: 0; position: absolute; display: inline-block; } #column2 { border-bottom: 3px solid black; border-left: 3px solid black; width: 79.8%; height: 100%; right: 0; position: absolute; display: inline-block; } /* Misc. */ .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .clearfix { float: clear; margin: 0; padding: 0; }
<!DOCTYPE html> <head> <meta charset=utf-8> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <title>Design</title> </head> <body> <div id="row1"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> <h1 class="header center">Generic Header</h1> </div> </div> <div id="row2"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> </div> </div> <div id="row3"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row4"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row5"> <div id="column1" class="clearfix" style="border-bottom: 0px;"> </div> <div id="column2" class="clearfix" style="border-bottom: 0px;"> </div> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2015-04-05 03:45:15
A couple of issues... is there a reason why all of your divs are positioned absolutely? 有几个问题...为什么所有div的位置都绝对正确？ Without specific margins they all just stack ontop of each other since position: absolute; 没有特定的边距，由于position: absolute;它们都彼此叠放在一起position: absolute; takes them out of the flow of the document. 将它们从文档流中删除。 Even relative to the container, they will all be stacked inside of the container. 即使相对于容器，它们都将堆叠在容器内部。
Secondly, your column widths add up to over 100%. 其次，您的列宽总计超过100％。 You need to account for the space that the border takes up. 您需要考虑边框占用的空间。
Here is your code without absolutely positioned divs and with adjusted column widths. 这是您的代码，没有绝对定位的div且列宽已调整。 Hopefully that should get you on the right track. 希望那能使您走上正确的道路。
.header { color: #AEC6CF; font-family: gabriola; font-weight: 900; font-size: 50px; position: relative; } /* ID */ #row1 { width: 98%; height: 15%; display: block; } #row2 { width: 98%; height: 2.5%; display: block; } #row3 { width: 98%; height: 70%; display: block; } #row4 { width: 98%; height: 2.5%; display: block; } #row5 { width: 98%; height: 7.25%; display: block; } #column1 { border-bottom: 3px solid black; border-right: 3px solid black; width: 20%; height: 100%; left: 0; display: inline-block; } #column2 { border-bottom: 3px solid black; border-left: 3px solid black; width: 73%; height: 100%; right: 0; display: inline-block; } /* Misc. */ .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .clearfix { float: clear; margin: 0; padding: 0; }
<!DOCTYPE html> <head> <meta charset=utf-8> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <title>Design</title> </head> <body> <div id="row1"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> <h1 class="header center">Generic Header</h1> </div> </div> <div id="row2"> <div id="column1" class="clearfix"> </div> <div id="column2" class="clearfix"> </div> </div> <div id="row3"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row4"> <span id="column1" class="clearfix"> </span> <span id="column2" class="clearfix"> </span> </div> <div id="row5"> <div id="column1" class="clearfix" style="border-bottom: 0px;"> </div> <div id="column2" class="clearfix" style="border-bottom: 0px;"> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.