图片宽度固定,文字宽度的自适应布局
padding在子元素上
HTML
<div class="test">
<img src="头像.jpg">
<div class="auto">
如textarea标签中,Webkit内核的浏览器会默认resize的值为both,即用户可以调节元素的宽度和高度。如下图就是在Google chrome中的textarea的默认显示,textarea右下角有一个可以控制缩放的按钮。
一般情况下,textarea是被固定宽度和高度的,如果你不愿意让其任意缩放,将textarea中resize的属性值设置成vertical,这个是允许用户只能调节高度,这样页面就不会变形了
</div>
</div>
CSS
img{
width:100px;
height: 100px;
float: left;
}
.auto {
padding-left: 120px;
}
padding在容器上
HTML
<div class="pbox">
<img src="头像.jpg">如textarea标签中,Webkit内核的浏览器会默认resize的值为both,即用户可以调节元素的宽度和高度。如下图就是在Google chrome中的textarea的默认显示,textarea右下角有一个可以控制缩放的按钮。一般情况下,textarea是被固定宽度和高度的,如果你不愿意让其任意缩放,你可以为textarea添加resize:none的css属性。这样就可以去除Webkit内核的浏览器的默认显示。将textarea中resize的属性值设置成vertical,这个是允许用户只能调节高度,这样页面就不会变形了
</div>
CSS
.pbox{
padding-left: 120px;
}
.pbox img{
float: left;
margin-left:-120px ;
}