特别常用的布局方式

<!-- 参展信息 -->
<div class="exhv-content">
    <div class="sui-info">
        <div class="sui-head">作品详情</div>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 作品名称：</dt>

            <dd class="sui-dd sui-dd-three">风景之十五</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 创作形式：</dt>

            <dd class="sui-dd sui-dd-three">原创</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 年代：</dt>

            <dd class="sui-dd">2016年</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 风格：</dt>

            <dd class="sui-dd">---</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 类型：</dt>

            <dd class="sui-dd">油画</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 材质：</dt>

            <dd class="sui-dd">---</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 尺寸：</dt>

            <dd class="sui-dd">60×50cm</dd>
        </dl>
        <dl class="sui-dl"> <dt class="sui-dt"><i class="sui-icon"></i> 标签：</dt>

            <dd class="sui-dd sui-dd-three">---</dd>
        </dl>
    </div>
</div>
</div>

// 参展信息 
.exhv-content {
    
    
  background: #ffffff;
  padding: 0 0.1rem;
}
.sui-info {
    
    
  box-sizing: border-box;
}
.sui-head {
    
    
  font-size: 14px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.sui-dl {
    
    
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 2;
  text-align: left;
  color: #666666;
}
.sui-dt {
    
    
  max-width: 7em;
  flex:1;
}
.sui-dd {
    
    
  word-break: break-all;
  text-align: left;
  box-sizing: border-box;
  color: #222222;
  // width: calc(100% - 7em);
  flex:2;
}
.sui-dd:empty::before {
    
    
  content: "---";
  color: #999;
}
.sui-dd-three {
    
    
  overflow: hidden;
  max-height: 80px;
}
.sui-icon {
    
    
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  background: red;
}

<div class="e-head">
        <div class="e-harrow"></div>
        <div class="e-back" @click="eMhide()">返回</div>
        <div class="e-btn">导出</div>
      </div>
```<div class="e-head">
        <div class="e-harrow"></div>
        <div class="e-back" @click="eMhide()">返回</div>
        <div class="e-btn">导出</div>
      </div>
```css

// 返回
.e-head {
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
}
.e-back{
  padding-left: 18px;
  color: #666666;
  flex: 1;
}
.e-harrow {
  width: 8px;
  height: 8px;
  border-top: 1px solid #666666;
  border-right: 1px solid #666666;
  transform: rotate(-135deg);
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -4px;
}
.e-btn{
  text-align: center;
  width:68px;
  height:0.28rem;
  line-height: 0.28rem;
  margin:0.08rem 0;
  background:rgba(9,178,137,1);
  border-radius:14px;
  color: #fff;
  font-size: 14px;
}

两行省略

-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
transition: all 0.3s linear;

特别常用的布局方式

猜你喜欢