html - 容器未与其旁边的容器对齐

Question

我有两个容器，一个宽度为 30%，另一个宽度为 70%，但它们不是内联的，而是一个向下移动并通过另一个容器，如下面的屏幕截图所示，我该如何修复这个？

    main {
    background-color: #f2f2f2;
    padding: 10px;
    float: right;
    width: 70%;
      }

    aside {
    text-align: center;
    background-color: #c4c4c4;
    overflow: hidden;
    float: left;
    width: 30%;
    }

这是截图

http://prntscr.com/jdsy9b

谢谢

Answer 1

尝试给 .main box-sizing: border-box;

   .main {
    box-sizing: border-box; 
    background-color: #f2f2f2;
    padding: 10px;
    float: right;
    width: 70%;
   }

通过这种方式，您可以告诉浏览器考虑填充，您可以在 docs. 中阅读更多相关信息