如果父级的宽度变宽,仍然是自适应的。(可以改变.box的宽度试试,也可以加许多文字测试。)注意:不需要给右侧加任何宽度,因为margin-left把左侧的图像+边距都加到一起了呢,就能永远保持自适应了,修改图片什么的比较方便哦。
代码如下:
<style>
*{ margin:0; padding:0;}
li{ list-style: none;}
.clearfix:after,.clearfix:before{
content: '';
display: table;
}
.clearfix:after{
clear:both;
}
.clearfix{*zoom:1;}
.box{
width:452px;
height:112px;
border: 1px solid red;
margin:40px auto;
}
.box h6{
height: 20px;
line-height: 20px;
font-size:12px;
margin-top: -10px;
margin-left:10px;
background: #fff;
padding: 0 10px;
float:left;
margin-bottom: -10px;
}
.cont{
padding: 16px 10px;
}
.img{
float:left;
}
.img,.img img{
width: 80px;
height: 80px;
border:1px solid #E5BFBF;
}
.text{
margin-left:98px;
}
</style>
</head>
<body>
<div class="box">
<h6>关于我们</h6>
<div class="cont clearfix">
<div class="img">
<img src="img/faye.jpg" alt="faye">
</div>
<div class="text">
<h3>Faye</h3>
<p>Faye0413</p>
<p class="txt">简介简介简介简介简介简介简介简介简介简介简介</p>
</div>
</div>
</div>
</body>
当然,实现此效果也可以用定位,把“关于我们”用定位定过去也是极好的!
代码如下:
.box{
width:452px;
height:112px;
border: 1px solid red;
margin:40px auto;
position:relative;
}
.box h6{
height: 20px;
line-height: 20px;
font-size:12px;
background: #fff;
padding: 0 10px;
position:absolute;
left:10px;
top:-10px;
}(其他代码都一样)