自动扩展行高的详情列表-DIV+CSS

最新推荐文章于 2022-08-10 13:45:23 发布

荆楚大虾

最新推荐文章于 2022-08-10 13:45:23 发布

阅读量191

点赞数

分类专栏：代码

本文链接：https://blog.csdn.net/FanErZong/article/details/109522520

版权

代码专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>

<style>
*{
    margin: 0;
    paddig: 0;
}

/** 详情面板 **/
.detail_panel{
     position: absolute;
     right: 18px;
     top: calc(70px + 16px);
     width: 370px;
     height: calc(100% - 70px - 250px);
     border: 1px solid #445F85;
     background-color: #0C2C58;
     padding: 10px;
     overflow:hidden;
}
/** 内容盒子 **/
.detail_box {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
/** 标题样式 **/
.detail_title {
    line-height: 30px;
    color: #fff;
}

/** 行样式 **/
.detail_row {
    min-height: 35px; /** 最小行高 **/
    display: flex; /** 自动等高 **/
    margin-top:2px; /** 行间距 **/
}
/** 左列样式 **/
.detail_left_column {
    float:left;
    width: 140px;           /** 左边定义具体宽度 **/
    min-width: 140px;      /** 左边最小宽度与width相同,以防其他内容未设置导致宽度被挤压 **/
    border: 1px solid #8B99B6;
    display: flex;        /** 垂直居中的关键 **/
    align-items: center; /** 垂直居中的关键 **/
    padding-left:5px;
}
/** 右列样式 **/
.detail_right_column {
    float:left;
    width:100%;   /** 右边自动补满 **/
    border-top: 1px solid #8B99B6;
    border-bottom: 1px solid #8B99B6;
    border-right: 1px solid #8B99B6;
    padding-right:5px;
}
/** 左单元样式 **/
.detail_left_cell {
    margin: 3px 5px 3px auto;
    word-break :break-all; /** 自动断行 适合包含亚洲文本或一些非亚洲文本的亚洲文本 **/
    font-size: 14px;
    color: #fff;
}
/** 右单元样式 **/
.detail_right_cell {
    margin: 3px auto 3px 5px;
    word-break :break-all; /** 自动换行 适合包含亚洲文本或一些非亚洲文本的亚洲文本 **/
    font-size: 14px;
    color: #fff;
}
</style>
</head>
<body>
     <div class="detail_panel">
           <div class="detail_box">
               <div class="detail_title">详情</div>
               <div class="detail_row">
                   <div class="detail_left_column">
                       <p class="detail_left_cell">姓名asfsd</p>
                   </div>
                   <div class="detail_right_column">
                       <p class="detail_right_cell">
                       张三asdfasdfasdfasdfasdfssadfasdfasdfasdfsadfasdfasddffdas1
                        张三asdfasdfasdfasdfasdfssadfasdfasdfasdfsadfasdfasddffdas
                           <img src="./a.jpg" height="150px" width="100%"/><!-- 显示定义图片宽度百分比防止宽度挤变形 -->
                       </p>
                   </div>
               </div>
               <div class="detail_row">
                   <div class="detail_left_column">
                       <p class="detail_left_cell">姓名asfsdasdfadfdfasdfas</p>
                   </div>
                   <div class="detail_right_column">
                        <p class="detail_right_cell">
                            asdfasdfasdfasdfasdfssadfasdfasdfasdfsadfasdfasddffdas
                        </p>
                   </div>
               </div>
           </div>
     </div>
</body>
</html>