一个元素布局的问题?

图1:
image.png
图2:
image.png

如图,如何实现该布局(如图1),查看更多按钮要一直在右边。一开始,查看更多按钮用float:right;但是如果屏幕分辨率刚好会出现图2的情况,如何解决

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .tips{
        width: 1000px;
      }
      .click-more{
        color: #409eff;
        float: right;
        cursor: pointer;
      }
      .el-icon{
        margin-left: 4px;
        transition: all 0.3s;
      }
      .btn-list{
        width: 1000px;
        text-align: right;
      }
      .btn-list button{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        border: 1px solid #409eff;
        border-color: #DCDFE6;
        color: #FFF;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        transition: .1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        background-color: #409eff;
      }
    </style>
</head>
<body>
  <div class="tips">
    <span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</span>
    <!-- <span>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉拉巴拉巴</span> -->
    <span class="click-more">查看更多<i :class="`el-icon el-icon-d-arrow-right`"></i></span>
  </div>
  <div class="btn-list">
    <button>保存</button>
  </div>
</body>
</html>
阅读 1.4k
2 个回答

给.tips加下面两个设置就可以了。

.tips{
            width: 1000px;
            height: auto;  //新加的
            overflow: hidden;  //新加的
        }

image.png
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏