html - 多个 FLOAT DIV 和 BORDER

Question

当我尝试放置 2 个 div 时遇到问题，它们都 float 到左侧，一个宽度为 80%，另一个宽度为 20%。然后我想在第一个 div 的右侧绘制一个 border 和一个 5px 的 box-shadow，因为每个 div 都有不同的颜色。

所以我刚刚在这个网站上搜索并且我找到了这个解决方案: Border issue in Floating div

但是恕我直言，这是个坏主意....我的分辨率为 1920px 宽度，我不能为 DIV 的宽度设置 48%....为 4px边框 我将在网页中为 2% - 2px 留出空白。你可以说，只需将背景颜色添加到正文:我可以，因为每个 DIV 都有自己的，但是这也是空间、比例的问题!!!

另一个问题 我遇到的问题是:我将高度设置为 100%(在第二个 div 上，宽度为 20%)并且它在示例中有效；但在实际网站中，高度也设置为 100%，DIV 不会占据列的整个高度，而是只占据最后一张图片的边距限制。

最后一个问题:box-shadow with floating div 这是个坏主意...我应该将 box-shadow 放在最后一个 div 的左侧，而不是前一个 div 的右侧吗？

看看我的代码 http://jsfiddle.net/9gp6J/

div#contenuto_body{
    margin: 0 0;
    padding: 0 0;
    float: left;
    width: 80%;
    height: 100%;

    background-color: #C90;

    -moz-box-shadow: 0 0 5px 1px #333;
    -webkit-box-shadow: 0 0 5px 1px #333;
    -ms-box-shadow: 0 0 5px 1px #333;   
    box-shadow: 0 0 5px 1px #333;

    border-right: 4px solid #E6B800;
}

body{
    margin: 0 0;
    padding: 0 0;
}

div#ads{
    margin: 0 0;
    padding: 0 0;
    width: 20%;  
    float: left;
    height: 100%;

    background-color: #CCC;
}

div#ads img{
    width: 70%;
    max-width: 200px;
    display: block;
    margin: 25% auto;
}

Answer 1

您可以使用 css3 中可用的 css3 功能 calc(...)，具体取决于您支持的浏览器，这可能适用。 IE9 以下的任何东西都不支持这一点，所以请记住这一点。这是一个 fiddle : http://jsfiddle.net/9gp6J/9/

任何其他解决方案都必须涉及负利润率，例如:

div#contenuto_body{
    ...
    margin-right: -4;
}

这应该适用于 IE7 及更高版本。