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.

中详细了解它

Answer 2

填充实际上会增加框的宽度和高度

在这里我删除了填充并添加了一些高度只是为了看到框。

    .main {
    background-color: #f2f2f2;
    height:100px;
    float: right;
    width: 70%;
      }

    .aside {
    text-align: center;
    background-color: #c4c4c4;
    overflow: hidden;
    float: left;
    height:100px;
    width: 30%;
    }

<div class="main"></div>
<div class="aside"> </div>

容器没有与其旁边的容器对齐

2 个答案: