1

我的问题：

CSS 必须在某个 div 上包含 30 个额外像素才能使其均匀，我想知道为什么。另外，我宁愿它是与其他两个 div 的偶数，而不是x+30.

我的解决方案：

我只是将 30 像素添加到第三个 div 以使其与其他 div 相同。

这是一个jsFiddle。

这是我正在谈论的三个 CSS：

.sidebar-top {
    float: left;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border: 1px solid #ccc;
    height: 32px;
    width: 290px;
    background: -webkit-linear-gradient(top, white 0%,#E8E8E8 100%);
    background: linear-gradient(to bottom, white 0%,#E8E8E8 100%);
    padding: 4px 15px;
}
.sidebar-middle {
    float: left;
    width: 290px;
    padding: 5px 15px 0 15px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    background: #fff;
}
.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 320px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
}

我的问题/tl;博士：

为什么我需要添加 30 像素.sidebar-bottom才能使其与其他 div 一致？

4

3 回答 3

3

简而言之，这是因为在每个sidebar-top, 和上添加了填充sidebar-middle。

因为您在其他s 的15px两侧都有一个填充。div这就是为什么你必须添加30px.

只需将其添加到您的sidebar-bottom：

padding: 0px 15px;
于 2013-03-10T18:57:36.267 回答
0

对于您定义宽度为 290px 的两个上部 DIV 并在每侧放置 15px 的填充，框模型将 290px 视为元素的内部宽度。因此，向左和向右添加了 15px，这使得元素 320px 不是 290..第三个 DIV 是 290 像素，您没有放置任何填充。所以您需要将 30 像素添加到 290 像素。

这是 Box 模型的问题之一，您必须校准填充、边框以获得所需的尺寸。

一个解决方案是向第三个 DIV 添加填充。

.sidebar-bottom {
    background: #fff;
    float: left;
    height: 16px;
    width: 290px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-right: 1px solid #d3d3d3;
    border-left: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

http://jsfiddle.net/mkhoudary/E2JCm/1/

于 2013-03-10T19:00:46.300 回答
0 
.sidebar-top {
    width: 290px;
    padding: 4px 15px;
}

.sidebar-middle {
    width: 290px;
    padding: 5px 15px 0 15px;
}

    .sidebar-bottom {
        width: 320px;
        /*no padding for sidebar-bottom others having 
   width - 290px + 
   padding left 15px + 
   padding right 15px = totally 320px.To equate sidebar-bottom to match with other two divs you are giving width as 320px :)*/
}
于 2015-09-16T17:21:23.047 回答