布局的目的是为了让main区域自适应剩余宽度,唯一的一点是要留出aside占用的宽度,我是用定位做的,但是感觉不自然,有更好的解决方案吗?需要兼容ie8
https://jsfiddle.net/gaoqiang...
布局的目的是为了让main区域自适应剩余宽度,唯一的一点是要留出aside占用的宽度,我是用定位做的,但是感觉不自然,有更好的解决方案吗?需要兼容ie8
https://jsfiddle.net/gaoqiang...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<style>
*{
box-sizing: border-box;
}
html, body{
font-family: 'Ubuntu Mono';
height: 100%;
}
.main{
position: relative;
top: 0;
left; 0;
min-width: 500px;
min-height: 100%;
padding: 10px;
margin-right: 240px;
background: #eee;
}
h1{
margin: 0;
}
.aside{
float: right;
width: 120px;
height: 120px;
padding: 10px;
background: #eee;
}
</style>
<body>
<div class="aside">
<h2>aside</h2>
</div>
<div class="main">
<h1>main</h1>
</div>
</body>
</html>
10 回答11.1k 阅读
15 回答8.4k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
8 回答6.2k 阅读
2 回答2.6k 阅读✓ 已解决
http://codepen.io/zengkan0703...
h1 元素默认宽度为100%,设置 overflow:hidden 属性就创建了一个新的 BFC(块格式化上下文,关于这个可以谷歌或者看我的文章),同时定宽的元素向右浮动,由于 BFC 不会与浮动区域重合,所以自适应的这个块会重新计算宽度。
其中一个重点是,定宽元素需要写在自适应元素之前,也就是需要优先渲染浮动元素,否则没有用。