问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css布局怎么做这样的效果

头像
nans23
    628787152

    clipboard.png

    clipboard.png

    clipboard.png

    商品名称里面，有时候是一行 有时候是两行。但是效果图距离上面的位置是固定的~~
    这样的效果是用定位来处理？还是判断商品名称的高度调整两个标签的margin？
    有没有好的方案trick?

    javascriptcssjavaphp
    阅读 2.8k
    4 个回答
    得票最新
    头像
    undefind_5
      1.5k1297133
      ✓ 已被采纳

      你是想要行高吗？就是一行字也有上下间隔距离，两行字同样也有相同上下间隔？你给商品名称的那个元素给个line-height:xxpx；试试吧

      补充：我才看明白楼主的意思：你是说当只有一行的时候，那个框框也有两行的高度对吧？那你就给那个框框设置一个固定高度啊（想要让高度可控，你就给盒子加一个行高属性，字体会居中，而且还好算盒子高度，比如你设置35px的行高，那么盒子就设置为70px（预留两行的高度）），再设置

      white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
 overflow:hidden;

      类似的字体溢出隐藏处理就是了啊

      头像
      brook
        3.1k4726

        line-clamp

        .line-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  max-height: 1.5em * 2;
  -webkit-box-orient: vertical;
}

        see https://codepen.io/yangg/pen/...

        头像
        stardew
          6.1k41633

          这个很简单：
          设置一个固定高度，超过了就隐藏。比如

          .name {
    height: 60px;
    line-height: 30px;
    overflow: hidden;
}
          头像
          incNick
            6.3k2613

            so easy啊，图片+标题外面肯定有个div吧，形如

                <div>
        <img>
        <title>
    </div>

            外面的div为准 position: relative;
            然后你的按钮使用绝对定位即可 position: absolute; bottom: 0; right: 0;

            示例代码：

                 <body>
      <h1>Test</h1>
      <div style="position: relative; width: 500px; border: 1px solid #000;">
        <h2>Hello</h2>
        <h2>Hello</h2>
        <h2>Hello</h2>
        <button style="position: absolute; bottom: 0; right: 0;">Test</button>
      </div>
     </body>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题