Question

当我尝试将 2个div，它们都浮动到左侧，一个宽度为80％，另一个为20％。然后我想在第一个div 的右侧绘制边框，在5px 的框阴影中绘制，因为每个div都有不同的颜色。

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

但这是个坏主意恕我直言 ....我的分辨率为1920px宽度，我不能把48％用于DIV的宽度.... for 4px边框我会在网页上找到2％ - 2px 的空白区域。你可以说，只需将背景颜色添加到身体：我可以因为每个DIV已经拥有它，但它也是一个空间问题，比例 !!!

我遇到的另一个问题：我将高度设置为100％（在第二个div上，宽度为20％），它在示例中有效;但是在真实网站中，高度也设置为100％，DIV不占据列的整个高度，而是直到最后一个图像的边距限制。

最后一个问题：带有浮动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以下的任何内容都不支持这一点，请记住这一点。这是一个小提琴： http://jsfiddle.net/9gp6J/9/

任何其他解决方案都必须涉及负边距，例如：

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

这应该适用于任何IE7及以上版本。

Answer 2

对于边框问题，在左侧div中添加一个div，并为该内部div添加右边框。这样，左外部div可以保持80％而不会增加4px边界问题。

HTML：

<div id="container">
    <div id="left">
        <div id="inner_left">
            content left
        </div>
    </div>
    <div id="right">
        content right
    </div>
</div>

CSS：

div#container {
    height:200px;
}

div#left {
    float:left;
    width:80%;
    height:100%;
    background:red;
}

div#inner_left {
    border-right:4px solid black;
    height:100%;
}

div#right {
    float:left;
    width:20%;
    height:100%;
    background:green;
}

选中此jsfiddle

多个FLOAT DIV和BORDER

2 个答案: