当我调整浏览器的大小时,CSS布局会发生变化。我只编了几个星期,并且碰到了一堵砖墙
问题描述:
嗨我看过W3并且在这里找不到答案。我已经实现了我想要的布局,但当我开始调整浏览器大小时,它会崩溃。我一直在编码六个星期。为什么布局不行为?当我调整浏览器的大小时,CSS布局会发生变化。我只编了几个星期,并且碰到了一堵砖墙
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">
答
好了,你的基本想法是好的,但你得到了一些东西不在这里理想。
我想你自己知道手动设置一个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;
}
这可防止浏览器使用它们的默认值,这将删除您对您的要素的空间和浏览器窗口。
答
浮动元素上使用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">
答
那是因为你需要编写代码响应,其中网页会自动调整到浏览器的大小。你可以在twitter引导的帮助下实现这一点。
一切顺利。
尝试搜索'responsive'。 –
我现在就在Patrick身上。欢呼声 – nooby