Question

只有一些基本的响应式设计有问题。我已经多次检查了我的数学但我无法弄清楚为什么左右两部分没有排成一行。这似乎是填充的一个问题：

* {
    margin: 0;
    padding: 0;
    text-decoration: none; 
    list-style-type: none;
    border: none;
}

body { 
  background-color: #ffffff; 
  color: #2C2C2C; 
  font: normal 100% Cambria, Georgia, serif;
}

#container {
    background-color: gray;
    margin: 0 auto;
    width: 90%; /* 960px */
}

    #left {
        background-color: #cccccc;
        float: left;
        padding: 0 5.5555556%; /* 10 / 180 */
        width: 18.75%; /* 180 / 960 */
    }

    #right {
        background-color: #999999;
        float: right;
        padding: 0 01.3157895%; /* 10 / 760 */
        width: 79.166667%; /* 760 / 960 */
    }

h1 {
  font-size: 1.5em; /* 24px / 16px */
  font-style: italic;
  font-weight: normal;
}

h1 a {
  color: #747474;
  font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

    <div id="left">

        <ul>
            <li><a href="">Nav Item 1</a></li>
            <li><a href="">Nav Item 2</a></li>
            <li><a href="">Nav Item 3</a></li>
        </ul>


    </div>

    <div id="right">

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

Answer 1

如果您在box-sizing: border-box;声明中添加*（响应设计方面的救世主），您可以使用width: 20%;和width: 80%作为您的div，然后填充将包含在宽度计算中，并且不会添加到宽度计算中。

我还应该补充一点，你可以混合使用不同的度量单位。如果您使用百分比作为宽度，则可以使用px或em进行填充。

DEMO

Answer 2

填充如下所述：

#left {
    background-color: #cccccc;
    float: left;
    padding: 0 5.5555556%; /* 10 / 180 */
    width: 18.75%; /* 180 / 960 */
}

不正确。它不是10/180而是10/960，或者只是普通的0.百分比的填充是相对于父级而不是对象本身。使用：

#left {
    background-color: #cccccc;
    float: left;
    padding: 0 0.0104%; /* 10 / 960  or just leave it out.*/
    width: 18.75%; /* 180 / 960 */
}

更新

右侧框中的填充也不正确。 padding: 0 01.3157895%;应为padding: 0 0.013157895%;十进制分隔符位于右侧两个位置。但它犯了与前一个相同的错误，实际上应该是10/960而不是760.或0.0104％。但是在那些小数字上它并不重要。

Answer 3

我很确定你可以使用calc（）来避免那些计算。这是 PEN ，它模拟了您尝试实现的类似示例。

calc（）会自动为您完成计算。

#left{
    float:left;
    width:calc(20% - 10px); /*20% minus the margin on both sides*/
    margin:5px;
    display:block;
}
#right{
    float:left;
    display:block;
    width:calc(80% - 10px); /*80% minus the margin on both sides*/
    margin:5px;
}

注意：calc()中的 运算符需要被空格包围。

基本响应式设计问题

3 个答案:

更新