根据内容动态扩展div

时间：2017-06-18 12:00:34

标签： html css less

我正在尝试重新创建this

我目前的代码是this

问题在于我希望平衡div在平衡变大时伸展，因为它目前超出了界限并在下方移动，其他关于外观的小问题也存在！

</style><style type="text/less">
@HeaderHeight: 150px;
@HeaderMargin: @HeaderHeight / 4;
@Color: #ff003c;

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    
    div.header {
        width: 100%;
        height: @HeaderHeight;
        background: #333;
        
        div.profile-right {
            float: right;
            
            img.avatar {
                float: right;
                margin: @HeaderMargin @HeaderMargin @HeaderMargin 10px;
                height: @HeaderHeight / 2;
                width: @HeaderHeight / 2;
                border-radius: 100%;
            }
            
            div.data {
                float: right;
                display: table;
                height: @HeaderHeight;
                color: #FFF;
                
                div.container {
                    display: table-cell;
                    vertical-align: middle;
                    
                    span.username {
                        font-size: 1.2em;
                        display: block;
                    }
                    
                    div.info {
                        width: 100%;
                        font-size: 1.2em;
                        display: block;
                        
                        i.sign.out.icon {
                            margin: 0;
                            font-size: 1.2em;
                            line-height: 1em;
                            float: right;
                            width: 15%;
                        }
                        
                        div.balance {
                            border-width: 10px;
                            font-size: 1.2em;
                            border: 2px @Color solid;
                            border-radius: 10px;
                            width: 75%;
                            
                            span.funds {
                                font-size: 1em;
                                text-align: left;
                                margin-left: 4px;
                            }
                            
                            i.add.icon {
                                width: initial !important;
                                height: initial !important;
                                font-size: 1em;
                                float: right;
                                margin: 1px 5px;
                                color: #000 !important;
                                background-color: @Color !important;
                                padding: 1px !important;
                            }
                        }
                    }
                }
            }
        }
    }
    
    div.page-content {
        width: 100%;
        height: calc(~"100%" - @HeaderHeight);
        background: black;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

<div class="header">
    <div class="profile-right">
        <img src="http://placehold.it/184x184" class="avatar">
        <div class="data">
            <div class="container">
                <span class="username">Username</span>
                <div class="info">
                    <i class="sign out icon"></i>
                    <div class="balance">
                        <span class="funds">$<span class="value">4.20</span></span>
                        <i class="circular inverted add icon"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-content"></div>

2 个答案:

答案 0 :(得分：1)

我认为我已成功使用display:table和display:table-cell实现了您的目标。加号图标设置为固定宽度，但如果值变大，则会扩展div。

我还删除了一些浮动并将它们切换到display:inline-block，以便它们可以垂直对齐。我通过添加一些额外的包装器来稍微改变了HTML。

您可能希望在主样式表中实现更改，因为目前我只是在样式表的底部覆盖您的样式。

https://codepen.io/anon/pen/jwyXMM

答案 1 :(得分：0)

您可以使用display:inline-block;，以便您的内容在天平div中正确匹配。

＆＃13;
＆＃13; 
</style><style type="text/less">
@HeaderHeight: 150px;
@HeaderMargin: @HeaderHeight / 4;
@Color: #ff003c;

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    
    div.header {
        width: 100%;
        height: @HeaderHeight;
        background: #333;
        
        div.profile-right {
            float: right;
            
            img.avatar {
                float: right;
                margin: @HeaderMargin @HeaderMargin @HeaderMargin 10px;
                height: @HeaderHeight / 2;
                width: @HeaderHeight / 2;
                border-radius: 100%;
            }
            
            div.data {
                float: right;
                display: table;
                height: @HeaderHeight;
                color: #FFF;
                
                
                
                div.container {
                    display: table-cell;
                    vertical-align: middle;
                    width:200px;
                    
                    
                    span.username {
                        font-size: 1.2em;
                        display: block;
                    }
                    
                    div.info {
                        width: 100%;
                        font-size: 1.2em;
                        display: inline-block;
                        
                        
                        
                        i.sign.out.icon {
                            margin: 0;
                            font-size: 1.2em;
                            line-height: 1em;
                            float: right;
                            width: 15%;
                        }
                        
                        div.balance {
                            border-width: 10px;
                            font-size: 1.2em;
                            border: 2px @Color solid;
                            border-radius: 10px;
                            width: 100%;
                            display:inline-block;
                            
                          
                        
                        span.value{
                          font-size:1em;
                          width:70%;
                        }
                            span.funds {
                                font-size: 1em;
                                text-align: left;
                                margin-left: 4px;
                            }
                            
                            i.add.icon {
                                width: 25% !important;
                                height: initial !important;
                                font-size: 1em;
                                float:right;
                                margin: 1px 5px;
                                color: #000 !important;
                                background-color: @Color !important;
                                padding: 1px !important;
                                
                            }
                        }
                    }
                }
            }
        }
    }
    
    div.page-content {
        width: 100%;
        height: calc(~"100%" - @HeaderHeight);
        background: black;
    }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

<div class="header">
    <div class="profile-right">
        <img src="http://placehold.it/184x184" class="avatar">
        <div class="data">
            <div class="container">
                <span class="username">Username</span>
                <div class="info">
                   
                    <div class="balance">
                    <i class="sign out icon"></i>
                        <span class="funds">$<span class="value">5333.20</span></span>
                        <i class="circular inverted add icon"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-content"></div>
＆＃13;
＆＃13;
＆＃13;

我还移动了（i.sign.out.icon）在平衡div中签出图标并使平衡div的宽度达到100％，以便所有内容保持在同一条线上并且适合。

相关问题
最新问题