水平滚动条问题与CSS

Question

我是CSS的新手.我刚刚开始了我的第一个网站,几乎完成了登陆页面.但是,我遇到了两个问题,但仍未找出根本原因.我创建了一个plukr链接http://plnkr.co/edit/aH8LfC?p=preview.

1. 出现水平滚动条,即使宽度设置为100%,左侧也有间隙.
2. 横幅下面的第三个框比其他两个框高,即使它们都共享相同的CSS类.

三个div框的代码:

    <div class="container info-box clearfix">
        <div class="col3">
          <h3>Investment Planning</h3>
          <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation & investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.</p>
        </div>
        <div class="col3">
            <h3>Wealth Management</h3>
            <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation & investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.</p>
        </div>
        <div class="col3">
            <h3>Risk Management</h3>
            <p>Money Plant Services is one of the premier Investment advisory Firm known for making taxation & investing simpler and more understandable and profitable for the clients. Currently serving more than 5000 Individual customers with corporate tie ups.
            </p>
        </div>
    </div>

CSS:

 .info-box{
   width:100%;
   margin-top: 20px;
 }

.col3{
  width: 30%;
  float: left;
  margin: 10px;
  padding: 5px 10px;
  background-color: #FCFCFC;
  border-radius: 2px;
  box-shadow: 0 0 4px #DDDDDD;
}

谁能帮助我理解我哪里出错了.我没有使用Bootstrap/Foundation框架,因为我需要掌握纯CSS.

注意:必须在完整窗口中加载网页才能查看问题.

此致,普拉迪普

Answer 1

除非您添加此CSS,否则此溢出是由左/右填充引起的,这些填充不包含在宽度中:

* {
    box-sizing: border-box;
}

更新了Plunker

这意味着(100px宽度)您的元素大小将100px 从左边框到右边框.如果你设置了15px填充,你将拥有:

• 左边填充:15px
• 右边填充:15px
• 内容:(100 - 2*15)= 70px
• 总计:(70 + 2*15)= 100px

如果保留默认值box-sizing,您将拥有:

• 左边填充:15px
• 右边填充:15px
• 内容:100px
• 总计:(100 + 2*15)= 130px