Question

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

出现水平滚动条，即使宽度设置为100％，左侧也有间隙。
横幅下面的第三个框比其他两个框高，即使它们共享相同的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;
}

Updated Plunker

这意味着（宽度为100px）您的元素大小将从左边框到右边框<{1}} 。如果您设置100px填充，则您将拥有：

左边填充：15px
右边填充：15px
内容：（100 - 2 * 15）= 70px
总计：（70 + 2 * 15）= 100px

如果您保留15px的默认值，则您将拥有：

左边填充：15px
右边填充：15px
内容：100px
总计：（100 + 2 * 15）= 130px

Answer 2

滚动条是由容器和页脚上的填充引起的。填充将内容从画布中推出。框的CSS没有定义的高度，因此高度取决于内部的内容量。

我认为你需要容器和列之间的东西来抵消填充（通常是负边距就可以了）。

Answer 3

最后一个方框的额外高度是因为您设置了：

white-space: pre-wrap;

pre-wrap属性指定为：

保留空格序列。换行字符在＆lt; br＆gt;处断开，并根据需要填充行框。

在您的HTML中，只有最后一个框中有换行符：

<p>Money Plant Services ...
</p>

因为white-space: pre-wrap导致换行符和空格都被保留，这使得<p>元素更高，以适应文本加上最后的换行符和空格。

水平滚动条问题与CSS

3 个答案: