Question

我有2个div，一个宽15％，另一个宽85％（总100％）设置为带有float的内联块：left和float：right以保持它们的两侧。

但是当付诸实践时，85％的div出现在15％div之下并且有一些重叠。下面的链接显示了我如何设置它。我需要他们完全相邻，占据100％的容器。

我的css：

#main_cont {
   position: absolute;
   width: 100%;
}

#sidenav {
    display: inline-block;
    float:left;
    padding: 15px;
    width:15%;
    background-color: #130103;
    -webkit-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    -moz-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    border: 1px solid #938082;
}

#main {
    display: inline-block;
    float:right;
    padding: 15px;
    text-align: center;
    width:79%;
    background-color: #130103;
    -webkit-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    -moz-box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    box-shadow: inset 0px 0px 5px 5px rgba(38,2,6,1);
    border: 1px solid #938082;
}

我尝试过较小的％，但是当缩小窗口大小时，它们会再次重叠。

Answer 1

你有填充，你没有考虑到。解决问题的一种方法是将box-sizing设置为border-box：

#main, #sidenav {
    box-sizing:border-box;
}

<强> jsFiddle example

Answer 2

在框模型中，如果添加填充，则宽度在内部，因此元素大于15％。您可以使用以下方法解决此问题：

#sidenav, #main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JSFIDDLE

当总宽度为100％时，2个内联块div不会排成一行

2 个答案: