左栏定宽,右栏自适应 方法一 使用浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左栏定宽,右栏自适应 方法一 使用浮动</title>
<style>
div {
width: 400px;
}
div img {
width: 200px;
float: left;
}
div div {
margin-left: 200px;
}
</style>
</head>
<body>
<div>
<img src="images/image1.jpg">
<div>如上例这类布局效果(左边一个固定图片,右边为内容),负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮,这个是做什么用的呢?你可以使用标准浏览器查看上方例子,依次点击变宽按钮至宽度最大,再点击不设置最小宽度按钮,你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处,但自身也有一个小的缺陷,即如果内部最后一个子元素使用负margin上移后,由于父元素是其边距元素,其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高度,最小高度值为较小的固定元素高度(此例即为左边固定的图片高度),就可彻底解决负margin上移影响父元素高度Bug。</div>
</div>
</body>
</html>
左栏定宽,右栏自适应 方法二 使用负margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左栏定宽,右栏自适应 方法二 使用负margin</title>
<style>
*{
margin: 0;
padding: 0;
}
div.box {
width: 80%;
border: 1px solid;
min-height: 200px;
_height: 200px;
}
img {
width: 200px;
height: 120px;
}
p {
margin-left: 210px;
margin-top:-120px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/image.jpg">
<p class="content">如上例这类布局效果(左边一个固定图片,右边为内容),负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮,这个是做什么用的呢?你可以使用标准浏览器查看上方例子,依次点击变宽按钮至宽度最大,再点击不设置最小宽度按钮,你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处</p>
</div>
</body>
</html>
多栏等高布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多栏等高布局</title>
<style>
div.box {
width: 80%;
margin: 0 auto;
overflow:hidden;
}
div[class*="content"]{
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
div.content1 {
width: 20%;
background-color: darkred;
}
div.content2 {
width: 60%;
background-color: yellowgreen;
}
div.content3 {
width: 20%;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box">
<div class="content1">
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
</p>
</div>
<div class="content2">
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
</div>
<div class="content3">
<p>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>
</div>
</div>
</body>
</html>
左右固定中间自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右固定中间自适应</title>
<style>
div {
height: 100px;
}
.box {
width: 80%;
margin: 0 auto;
}
.left,.right {
width:200px;
}
.left {
float: left;
background-color: yellowgreen;
}
.center {
margin: 0 220px;
background-color: blueviolet;
}
.right {
float: right;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>