1

我有 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; }
4

5 回答 5

2

习惯了这个

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

因为您使用的是边框并且习惯了宽度

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

box-sizing是css3 属性

演示

于 2013-06-21T09:02:32.337 回答
1

当您使用精确百分比来匹配 100% 时，所有使用边距或填充的 CSS 属性都将很重要。在您的代码中，您添加了一个border-right大小为 1px 的属性，然后您的 DIV 将为 10% + 1px，因此您的右 DIV 没有足够的空间，它位于中间的下方。

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

于 2013-06-21T09:05:57.950 回答
0

因为 45% + 10% + 45% + 1px 边框 > 100%

你应该添加

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

在你的样式表中

于 2013-06-21T09:17:09.410 回答
0

有一些边距，你应该修复它 Margin-left: ...%; 保证金最高：....%

如果您尝试这样做，那么您必须在哪里输入一个值。

于 2013-06-21T09:01:27.247 回答
0

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

只是一个想法。

于 2013-06-21T09:09:36.400 回答