0

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

所以我刚刚在这个网站上搜索过，我找到了这个解决方案： 浮动 div 中的边界问题

但恕我直言，这是个坏主意....我的分辨率为 1920px 宽度，我不能为 DIV 的宽度设置 48%....对于 4px 边框，我将在网页中有一个空白区域2% - 2 像素。您可以说，只需将背景颜色添加到主体：我可以，因为每个 DIV 已经拥有它自己的，但这也是空间、比例的问题！

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

最后一个问题：带有浮动 div 的 box-shadow 这是个坏主意...我应该将 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;
}
4

2 回答 2

0

您可以使用 css3 中calc(...)可用的 css3 功能，具体取决于您支持的浏览器可能适合。IE9 以下的任何内容都不支持此功能，因此请记住这一点。这是一个小提琴：http: //jsfiddle.net/9gp6J/9/

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

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

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

于 2013-06-29T02:16:00.540 回答
0

对于边框问题，在左侧 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

于 2013-06-29T02:30:11.990 回答