zoukankan      html  css  js  c++  java
  • div随内容调整高度(父元素高度随子元素变化)

      

    <div style=" 360px;">
    <div class="message"><img class="icon friend" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" /> <a class="text friend">?????????????????????????????????????????</a>
    <div class="clear">&nbsp;</div>
    </div>
    <div class="message"><a class="text user">akldjsfasklsdajflkasdjflksadjflksadjfsadkljfasjdkl</a> <img class="icon user" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" />
    <div class="clear">&nbsp;</div>
    </div>
    <div class="message"><img class="icon friend" src="//pic.cnblogs.com/avatar/814901/20170506112856.png" alt="" />
    <p class="nickname">dy</p>
    <a class="text friend">???????</a>
    <div class="clear">&nbsp;</div>
    </div>
    </div>
    html
    .message {
        position: relative;
        width: 100%;
        padding-top: 12px;
    }
    .message .icon {
        position: absolute;
        display: block;
        height: 44px;
        width: 44px;
        top: 12px;
    }
    .message .icon.friend{
        left: 9px;
    }
    .message .icon.user{
        right: 8px;
    }
    .message .text {
        position: relative;
        display: block;
        border-radius:10px;
        max-width: 223px;
        height: auto;
        padding: 11px 20px 19px 17px;
        font-size:14px;
        color:#4a4a4a;
        resize: none;
        word-break: break-all;/*自动换行*/
        word-wrap: break-word;/*以单词换行*/
        white-space: pre-wrap;
        float: left;
    }
    .message .text.user {
        background:rgba(24,187,155,0.60);
        right: 69px;
        float: right;
    }
    .message .text.friend {
        background:#d8d8d8;
        left: 69px;
    }
    .message .nickname {
        margin: 0;
        padding: 0;
        font-size:12px;
        color:rgba(0,0,0,0.54);
        width:223px;
        line-height:20px;
        left:69px;
    }
    css

    css样式clear设为both,然后父元素的高度就会随子元素改变了

    块内icon用绝对位置,不会对相对位置的块造成影响

    参考自 让div父元素的高度随子元素高度的变化而变化

  • 相关阅读:
    Decrease (Judge ver.)
    Raising Modulo Numbers
    最短Hamilton路径
    64位整数乘法
    递归系列——数组和对象的相关递归
    函数内容新增——函数表达式
    数据结构和算法(一)——栈
    (转)jQuery中append(),prepend()与after(),before()的区别
    微信端的user-Agent
    less知识点总结(二)
  • 原文地址:https://www.cnblogs.com/cdyboke/p/6926911.html
Copyright © 2011-2022 走看看