前端开发 布局问题：浮动
摘要：上海张江前端开发薪资|web前端开发可以自学吗|前端开发和网页设计一样吗 第一，左侧定宽，右侧自适应。 html 代码 <!doctype html> <html> <head> <title>前端开发所学专业能力要求&……
上海张江前端开发薪资|web前端开发可以自学吗|前端开发和网页设计一样吗
第一，左侧定宽，右侧自适应。
html 代码
<!doctype html>
<html>
<head>
<title>前端开发所学专业能力要求</title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
.fl {
float: left;
width: 200px;
background: pink;
}
.fr {
width: auto;
min-height: 200px;
background: blue;
overflow: hidden;
}
</style>
<body>
<div class=”main”>
<div class=”fl”></div>
<div class=”fr”></div>
</div>
</body>
</html>
反思：在我运用这个浮动时，我脑海中的印象是我需要把左右两边的div都增加float：left这个属性。
但是实际上，当我加上float的时候，这个就出现问题了。
html 代码
<!doctype html>
<html>
<head>
<title>硕士web前端开发 薪资</title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
.fl {
float: left;
width: 200px;
background: pink;
}
.fr {
float: left;
width: auto;
min-height: 200px;
background: blue;
overflow: hidden;
}
</style>
<body>
<div class=”main”>
<div class=”fl”></div>
<div class=”fr”></div>
</div>
</body>
</html>
原先一直想不通，不是说加了浮动就可以在同一行上显示了吗？为什么会出现这样的情况？
然后，询问了群里的大神们，发现一些以前忽略的东西。
关于float属性，所有主流浏览器都支持浮动，但是任何的版本的IE（包括IE8）都不支持属性值：“inherit”；在 css 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
第二，两边定宽，中间自适应。
正确姿势：
html 代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
/*两边定宽 中间自适应*/
.fl2 {
float: left;
width: 200px;
background: #0968DE;
}
.fr2 {
float: right;
width: 200px;
background: #32EF64;
}
.cen2 {
margin-left: 200px;
margin-right: 200px;
background: red;
}
</style>
<body>
<div class=”main”>
<div class=”fl2″></div>
<div class=”fr2″></div>
<div class=”cen2″></div>
</div>
</body>
</html>
仔细看看上面的html，是不是看到不一样的东西了？不一样的地方就是我刚刚接触这个布局不懂的地方。一般来说，我写html，都是从上到下，从左到右的；但是在这个布局中把位于中间部分的div写在了最后的部分。
按照我的理解，按照顺序写div，会造成下面的这种后果：
html 代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset=”UTF-8″>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
overflow: hidden;
}
.main div {
min-height: 200px;
}
/*两边定宽 中间自适应*/
.fl2 {
float: left;
width: 200px;
background: #0968DE;
}
.fr2 {
float: right;
width: 200px;
background: #32EF64;
}
.cen2 {
margin-left: 200px;
margin-right: 200px;
background: red;
}
</style>
<body>
<div class=”main”>
<div class=”fl2″></div>
<div class=”cen2″></div>
<div class=”fr2″></div>
</div>
</body>
</html>
关于div标签，所有的主流浏览器都支持；在默认情况下，一个div会显示一行，俗的来说就是，每个div在默认下都会自动换行。
前端开发笔试题一套|indexof/ .zip web前端开发规范手册|前端开发编码规范
» 本文来自：前端开发者 » 《前端开发 布局问题：浮动》
» 本文链接地址：https://www.rokub.com/4966.html
» 您也可以订阅本站：https://www.rokub.com
近期评论