当我调整浏览器的大小时，CSS布局会发生变化。我只编了几个星期，并且碰到了一堵砖墙

Question

嗨我看过W3并且在这里找不到答案。我已经实现了我想要的布局，但当我开始调整浏览器大小时，它会崩溃。我一直在编码六个星期。为什么布局不行为？

div { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
#head { 
 
    background-color: red; 
 
    height: 150px; 
 
    color: white; 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#left { 
 
    display: inline-block; 
 
    width: 47%; 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 

 
#right { 
 
    display: inline-block; 
 
    width: 49%; 
 
    height: 300px; 
 
    float: right; 
 
    overflow: auto; 
 
} 
 

 
#footer { 
 
    height: 100px; 
 
    background-color: blue; 
 
    color: white; 
 
    }

<div id="head"> The Daily Scumbag</div> 
 
<div id="left"> 
 
    <h1>This is left column. 
 
    </h1> 
 
    Lorem Vestibulum 
 
</div> 
 
<div id="right">

Answer 1

好了，你的基本想法是好的，但你得到了一些东西不在这里理想。

我想你自己知道手动设置一个div到width: 47%;而另一个到49%并不理想。我想你想要每个50%。在这种情况下，当您想使用float时，您不需要display:inline-block;。

更重要的是，更容易CSS管理，我想补充box-sizing:border-box;到您的DIV + CSS声明。它可以防止边界，被添加ontop的宽度的填充，并确保您可以使用width: 50%;相应（阅读更多关于此这里：https://www.w3schools.com/cssref/css3_pr_box-sizing.asp）。

见该更新的例子在这里：

<style> 
html,body{ 
    padding:0; 
    margin:0; 
} 
div { 
    border: 1px solid black; 
    padding: 10px; 
    box-sizing:border-box; 
} 

#head { 
    background-color: red; 
    height: 150px; 
    color: white; 
    font-size: 50px; 
    text-align: center; 
} 
#left { 
    float:left; 
    width: 50%; 
    height: 300px; 
    overflow: auto; 


} 
#right { 
    width: 50%; 
    height: 300px; 
    overflow: auto; 
} 
#footer { 
    clear:left; 
    height: 100px; 
    background-color: blue; 
    color: white; 
} 
</style> 

一个注：

html,body{ 
    padding:0; 
    margin:0; 
} 

这可防止浏览器使用它们的默认值，这将删除您对您的要素的空间和浏览器窗口。

Answer 2

浮动元素上使用box-sizing: border-box;包括填充和边界。填充和边框被添加到宽度。

div { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
#head { 
 
    background-color: red; 
 
    height: 150px; 
 
    color: white; 
 
    font-size: 50px; 
 
    text-align: center; 
 
} 
 

 
#left { 
 
    display: inline-block; 
 
    width: 47%; 
 
    height: 300px; 
 
    overflow: auto; 
 
    box-sizing: border-box; 
 
} 
 

 
#right { 
 
    display: inline-block; 
 
    width: 49%; 
 
    height: 300px; 
 
    float: right; 
 
    overflow: auto; 
 
    box-sizing: border-box; 
 
} 
 

 
#footer { 
 
    height: 100px; 
 
    background-color: blue; 
 
    color: white; 
 
    }

<div id="head"> The Daily Scumbag</div> 
 
<div id="left"> 
 
    <h1>This is left column. 
 
    </h1> 
 
    Lorem Vestibulum 
 
</div> 
 
<div id="right">

Answer 3

那是因为你需要编写代码响应，其中网页会自动调整到浏览器的大小。你可以在twitter引导的帮助下实现这一点。

一切顺利。