Question

............................................... .................................................. .................................................. ..................

我想设置div跟随数据的高度自动，我该如何设置？

............................................... .................................................. .................................................. ..................

<div style="
width: 100%;
">
    <div style="
                margin: 0;  
                padding: 0; 
                height: 48px;    
                outline: 0;  
                font-weight: inherit;  
                font-style: inherit;  
                font-size: 100%;  
                font-family: inherit;  
                vertical-align: baseline;
                background: #f5f5f5;
                border-bottom: 1px #ccc solid;
                width: 100%;
                -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
                -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
                box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
                display: block;

">
        <div style="
                    margin: 0 auto;  
                    width: 992px; 
                    height: 48px;
        ">
            <div style="
                        margin-top: 0px;  
                        height: 48px;                
                        text-align: center;
                        float: left;
                        width: 100%;
                        line-height: 48px;
            ">    
                <div style="
                        margin-top: 0px;  
                        height: 48px;                
                        text-align: center;
                        float: left;
                        line-height: 48px;
                        width: 50%;
                ">      
                    kkkkkkkk
                    <br>
                    kkkkkkkk
                    <br>
                    kkkkkkkk
                    <br>
                    kkkkkkkk
                </div>

                <div style="
                        margin-top: 0px;                  
                        text-align: center;
                        float: right;
                        line-height: 48px;
                        width: 50%;
                ">
                    kkkkkkkk
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我想我知道你想要什么。不是100％肯定，因为你没有多大意义。

我开始为每个div制作一个id，因为拥有那么多内联样式只是愚蠢。

HTML：

<div style="width: 100%;">
    <div id="innerdiv">
        <div id="innerdiv2">
            <div id="innerdiv3">
                <div id="innerdiv4">Testing
                    <br />Test info
                    <br />Test info
                    <br />Test info</div>
                <div id="innerdiv5">Testing</div>
            </div>
        </div>
    </div>
</div>

CSS：

#innerdiv {
    margin: 0;
    padding: 0;
    height: auto;
    overflow: hidden;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    background: #f5f5f5;
    border-bottom: 1px #ccc solid;
    width: 100%;
    -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15);
    display: block;
}
#innerdiv2 {
    margin: 0 auto;
    width: 992px;
    height: auto;
}
#innerdiv3 {
    margin-top: 0px;
    height: auto;
    text-align: center;
    float: left;
    width: 100%;
    line-height: 48px;
}
#innerdiv4 {
    margin-top: 0px;
    height: auto;
    text-align: center;
    float: left;
    line-height: 48px;
    width: 50%;
}
#innerdiv5 {
    margin-top: 0px;
    text-align: center;
    float: right;
    line-height: 48px;
    width: 50%;
}

现在你正在寻找的东西（我认为）是overflow: hidden;你漂浮了内部div，所以在父div中没有计算高度。将overflow添加到#innerdiv可以解决此问题。

DEMO HERE

如何设置高度auto css div跟随数据？

1 个答案:

HTML：

CSS：