Question

我有一个外部div，在一个div中有两个内部div（leftDiv）左边框为1px，这会导致右边的div移出outerDiv。

CSS

.outerDiv{
    display: block;
    background: none repeat scroll 0% 0% #FFF;
    height: 400px;
    margin: 1%;     
    width: 97.5%;
    border: 1px solid #D6D6D6;
    box-shadow: 1px 0px 13px -2px #D6D6D6;
    border-radius: 6px;
}
.leftDiv{
    height: 400px;
    width: 65%;
    float: left;
    border-right: 1px solid #D6D6D6;
}
.rightDiv{
    height: 400px;
    width: 35%;
    float: left;
    background:orange;      
}

的jsfiddle： LINK

我需要rightDiv来占用outerDiv的完整剩余空间

Answer 1

将margin-left: -1px添加到.rightDiv。

.rightDiv{
    height: 400px;
    width: 35%;
    float: left;
    background:orange;      
    margin-left:-1px;
}

我向-1px添加了.rightDiv页边距，以切断.leftDiv的边框右侧空格。这是1px。

<强> Working Fiddle

或

使用positioning - Fiddle

或

使用display: table-cell - Fiddle

Answer 2

以下是两个解决方案：

添加margin-left：-1px;到.rightDiv - 这是非常跨浏览器的或
将box-sizing：border-box添加到.leftDiv - IE8及以上+现代浏览器支持此功能

Answer 3

你可以使用css3的calc属性来同时处理百分比和像素。使用：

.leftDiv{
    height: 400px;
    width: calc(65% - 1px);
    float: left;
    border-right: 1px solid #D6D6D6;
}

检查一下：http://jsfiddle.net/267SR/1/

Answer 4

添加此规则

.outerDiv div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

示例小提琴：http://jsfiddle.net/267SR/2/

box-sizing: border-box;将包含div元素宽度内的边框大小

Answer 5

由于65% + 35% + 1px高于100%，因此会向下移动。

将一个百分比降低一个，你就可以了！

http://jsfiddle.net/267SR/3/

Answer 6

使用box-sizing: border-box

 .leftDiv{
            height: 400px;
            width: 65%;
            float: left;
            border-right: 1px solid #D6D6D6;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }

DEMO

Answer 7

这里有很多不同的答案，所有这些都很好。我只是发布这个作为另一种选择，但也许不一定是最好的选择。

我添加了:after，因此没有更改实际代码的方式。

这样，您就不需要做更大或更小的事情了。只需在当前.leftDiv上添加一些内容。

添加

position:relative;

到.leftDiv＆＃39; sss。

然后将其添加到CSS：

.leftDiv:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:1px;
    background:#333;
    z-index:9999;
}

JsFiddle

Answer 8

查看更改，正确设置display:inline和divs的{{1}}。

所有浏览器友好

JSFiddle

将两个div放在div内

8 个答案: