text-wrap:balance实现图文布局实例页面

回到相关文章 »

展示

点赞头像布局-传统实现

点赞头像布局-balance实现

代码

CSS代码：

.box {
    border: 1px solid;
    padding: 1rem;    
    text-align: center;
}
.box img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}
.like {
    border: 1px solid gray;    
    background: none;
    width: 4rem; height: 4rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}
.like p {
    color: gray;
    margin: 5px 0 0;
}
.custom {
    max-width: 480px;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.balance {
    max-width: 480px;
    margin-inline: auto;
    text-wrap: balance;
}
.balance img {
    margin-inline: .25rem;
}

HTML代码：

<div class="box">
    <button class="like">👍<p>点赞</p></button>
    <div class="custom">
        <img src="1.jpeg" />
        ...
        <img src="14.jpeg" />
    </div>
</div>
<h4>点赞头像布局-balance实现</h4>               
<div class="box">
    <button class="like">👍<p>点赞</p></button>
    <div class="balance">
        <img src="1.jpeg" />
        ...
        <img src="14.jpeg" />
    </div>
</div>