html - 设计有问题(布局未采用可用宽度)

Question

由于某些原因，我已经删除了这里主要部分的内容，并且看到设计被破坏了。

这是主要部分的 HTML →

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

main-sidebar的CSS是这样的→

.main-sidebar {
    /*background: #323232;*/
    background: #ffffff;
    width: 30%;
    margin-left: 2.127659574468%;
    color:black;
}

内容区的CSS是这样的→

.main {
background: #ffffff;
width:67.8%;
color: #000000;

您可以看到主侧边栏和主要内容区域都定义了以百分比表示的宽度。宽度分布的数学是这样的→

67.8% + 30% + 剩下的就是margin/padding = 100%

然后为什么(即使我们没有主要部分中的内容)设计中断，参见示例 here .

当有内容时 design works flawlessly.

Answer 1

您的 .content 容器设置为 display: table; 因此它不会填满其自身容器的整个宽度。删除 display: table; 属性或将宽度明确设置为 100%，这样应该可以修复布局。