要实现下图这个效果:

问题

图片描述

左上角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';

效果:
图片描述

我胡汉三又回来了~

请大神指点有没有更好的方法~


竹与蜻蜓
123 声望9 粉丝

没有故事的女同学