Question

我有3个DIV在“包含”DIV中。容器的宽度为960px，3个DIV的宽度为45％，10％和45％。他们都“向左浮”。够简单吧？

由于某种原因，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; }

Answer 1

习惯了这个

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

因为您使用边框并习惯宽度

宽度为width + border ==＆gt; div的总宽度

box-sizing是css3 属性

<强> Demo

Answer 2

当您使用精确百分比匹配100％时，所有使用边距或填充的CSS属性都很重要。在你的代码中，你添加一个大小为1px的border-right属性，然后你的DIV将是10％+ 1px，所以没有适合你的右侧DIV的空间而且它位于中间区域之下。

解决方案：使用middle div作为容器，并将border-right添加到另一个DIV里面。

Answer 3

有一些余量你应该修复它保证金左：......％; 边距：....％

如果您尝试这样做，那么......你必须放一个值。

Answer 4

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

只是一个想法。

Answer 5

因为45％+ 10％+ 45％+ 1px边界＆gt; 100％

你应该添加

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

你的stlyesheet中的

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

5 个答案: