为什么这些DIV不能正确对齐？

我有3个DIV在“包含”DIV内。容器宽960像素，3个DIV宽度分别为45％，10％和45％。他们都是“左转”。够简单吧？为什么这些DIV不能正确对齐？

那么由于某些原因，3个DIV将不会正确对齐，即彼此相邻。中间的DIV总是在右边的DIV之上。我究竟做错了什么？这里有一个小提琴说明我的意思：http://jsfiddle.net/m2Zzw/2/

HTML：

<div id="mTopContainer"> 
    <div class="mTopInner clearfix"> 
     <div class="leftBlock floatLeft"> 
      <p>[Customer], we have found 126 results for you, which are based on a mortgage of £50,000 over a period of 17 years.</p> 
      <p>The mortgage will be secured against a property with a value of £100,000, meaning that you will be borrowing 50% of the property's purchase price.</p> 
      <p>We used your answers to find the lenders more likely to accept you and the rates they are likely to offer you – the rates and lenders may therefore differ from those featured on our homepage. The actual rates offered to you may differ from that shown.</p> 
     </div> 
     <div class="middleBlock floatLeft">&nbsp;</div> 
     <div class="rightBlock floatLeft"> 
      <h6>Your next step</h6> 
      <p>Get advice from one of our expert mortgage partners, Sensible Financial Solutions – FTB Prime and take the hassle out of finding the right mortgage for your needs.</p> 

      <p>Any advice provided is not given either by or on behalf of [company].</p> 
     </div> 
    </div> 
</div>

CSS：

#mTopContainer { width:100%; height:250px; border:1px solid #BDD7EF; margin-top:15px; } 
/*.mTopInner { height:250px; background: url('/Images/Mortgages/restoplady.png') top right no-repeat; } */ 
.leftBlock { width:45%; } 
.middleBlock { width:10%; border-right:1px solid #BDD7EF; margin:0 auto; } 
.rightBlock { width:45%; } 

.clearfix:before, .clearfix:after { content: " "; display: table; } 
.clearfix:after { clear: both; } 
/* For IE 6/7 only */ 
.clearfix { *zoom: 1; } 
.floatLeft { float:left; }

来源

2013-06-21 zik

您的问题是边境。你有'45％+ 10％+ 45％+ border'这是'100％+ border'，所以这3个元素不适合一个_row_。 –

中间的div元素上有一个'border' –

谢谢你们，我没有意识到这个增加了宽度：/现在就修正它。谢谢！ – zik

用于本

.middleBlock{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

，因为你正在使用边境并用于宽度

比你的宽度是你的div width + border ==>总宽

box-sizing是css3属性

Demo

来源

2013-06-21 09:02:32

非常感谢！刚刚在Paul Irish的博客上阅读了这篇文章......只是尝试过这一点，并发挥了作用。 – zik

有了一定的余量，你应该修复它保证金左：......％; 保证金顶部：....％

如果您尝试该操作，那么...您必须提供一个值。

来源

2013-06-21 09:01:27

当您使用确切的百分比来匹配100％，即保证金或填充的工作将是重要的CSS属性。在您的代码中，您添加了1px大小的border-right属性，那么您的DIV将为10％+ 1px，因此您的右侧DIV没有足够的空间，并且它位于中间位置。

解决方案：使用中间div作为容器，并在另一个DIV中添加border-right。

来源

2013-06-21 09:05:57

如果你想兼容旧的浏览器，只需删除中间div的边框。然后，您可以使用像素背景图像将其重新插入，将其放置在右侧并将其设置为在Y轴上重复。

只是一个想法。

来源

2013-06-21 09:09:36 Shomz

谢谢，试图避免黑客攻击，我们支持IE8>所以接受的答案应该是好的 – zik

我可能在这里误用了'hack'这个词，但是肯定的是，如果CSS3适合你，那就去吧！ – Shomz

哈哈我知道你的意思。无论如何，我们需要使用黑客来耻辱。血腥的微软！ – zik

因为45％+ 10％+ 45％+ 1像素边框> 100％

你应该在你stlyesheet添加

.middleBlock{ 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
}

来源

2013-06-21 09:17:09 Sivan

为什么这些DIV不能正确对齐？

回答

相关问题