要实现下图这个效果:
问题
左上角label的边框宽度为0.5px,字体大小为15px;下面的文字和label间距为16px。所有元素宽度固定,高度自适应。
解决方案
html代码
<div class="parent">
<div id="wrapper">
<div id="label">
Lorem ipsum
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam accusamus ipsa voluptatem rem labore in alias officia, iste molestiae, illum ratione explicabo delectus laborum iusto. Tempore aspernatur, nesciunt excepturi eum.
</div>
</div>
CSS代码
.parent{
width:300px;
background: goldenrod;
}
#wrapper{
position: relative;
}
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.content{
margin-top: 16px;
}
js代码
var label = document.getElementById('label');
var wrapper = document.getElementById('wrapper');
var labelHeight = window.getComputedStyle(label).height;
wrapper.style.height = parseInt(labelHeight)/2 + 'px';
## 心路历程
首先,0.5px的边框宽度和15px的字体大小,一般情况下,是不支持的。这时就使用了css3的缩放。且以父元素左上角为缩放原点。
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
}
.content{
margin-top: 16px;
}
效果是这样的
可以看到虽然label进行了缩放,但还占据了原来的大小的空间。
所以就显示了增加蓝色框的wrapper的意义,使label脱离文档流和文本流,同时占位。(float并不能脱离文本流)
进一步的代码是这样的:
#wrapper{
border: 1px solid blue;
position: relative;
}
#label{
width: 100px;
border: 1px solid black;
font-size: 30px;
transform: scale(.5);
transform-origin: 0 0;
position: absolute;
top: 0;
left: 0;
}
.content{
border: 1px solid red;
margin-top: 16px;
}
效果:
哦哟~蓝色框wrapper塌了,怎么占位呢?
label高度是不定的,怎么设置wrapper的高度呢?
只好用js了:
var label = document.getElementById('label');
var wrapper = document.getElementById('wrapper');
var labelHeight = window.getComputedStyle(label).height;
wrapper.style.height = parseInt(labelHeight)/2 + 'px';
效果:
我胡汉三又回来了~
请大神指点有没有更好的方法~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。