Question

#itemcontent div未扩展到其内容的大小。如何让＃item-content div延伸到当前位置而不设置高度（以像素为单位）以保持包装！

这是一个codepen： http://codepen.io/Malvooo/pen/GJeVxW

下面的Stack Snippet：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* {
    margin: 0;
    padding: 0;
}

body {
    background: #222;
    font-family: 'Open Sans', sans-serif;
}

#item {
    margin-bottom: 2%;
    margin-top: 8px;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    width: 300px;
}

#triangle {
    border-bottom: 12px solid #3399cc;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid transparent;
    margin: 0 auto;
    width: 0;
}

#item h1 {
    background: #3399cc;
    color: #fff;
    font-size: 140%;
    font-weight: 300;
    padding: 20px 0;
    text-align: center;
}

#item-content {
    background: #f0f0f0;
    padding: 0 4%;
}

#item-left {
    background: #f0f0f0;
    float: left;
    padding: 5px 0;
    width: 50%;
}

#item-content h2 {
    color: #555;
    font-size: 95%;
    font-weight: 600;
    padding: 5px 0;
    padding-left: 10px;
    text-align: left;
    width: 100%;
}

#item-right {
    background: #f0f0f0;
    float: right;
    padding: 5px 0;
    width: 50%;
}

#item-content h3 {
    color: #555;
    font-size: 95%;
    font-weight: 300;
    padding: 5px 0;
    text-align: left;
    width: 100%;
}

#item-content h4 {
    background: #3399cc;
    color: #fff;
    font-size: 100%;
    font-weight: 300;
    padding: 5px 0;
    text-align: center;
}

＆＃13;

    <body>
        <div id="item">
            <div id="triangle"></div>
            <h1>Assault Rifle</h1>
            <div id="item-content">
                <div id="item-left">
                    <h2>Type</h2>
                    <h2>Stacksize</h2>
                </div>
                <div id="item-right">
                    <h3>Weapon</h3>
                    <h3>1</h3>
                </div>
                <h4>Weapon Stats</h4>
                <div id="item-left">
                    <h2>Fire Mode</h2>
                    <h2>Attack Rate</h2>
                    <h2>Damage</h2>
                    <h2>&nbsp;</h2>
                    <h2>&nbsp;</h2>
                    <h2>&nbsp;</h2>
                    <h2>Recoil</h2>
                    <h2>Range</h2>
                    <h2>Capacity</h2>
                </div>
                <div id="item-right">
                    <h3>Full Automatic</h3>
                    <h3><i>Unknown</i></h3>
                    <h3>Head: 100</h3>
                    <h3>Chest: 61</h3>
                    <h3>Arms: 11</h3>
                    <h3>Legs: <i>unknow</i></h3>
                    <h3>Medium-Severe</h3>
                    <h3>250 ~ 400m</h3>
                    <h3>30</h3>
                </div>
                <h4>Ammunition</h4>
                <div id="item-img">
                    <img src="images/5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/Explosive_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/HV_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                    <img src="images/Incendiary_5.56_Rifle_Ammo_icon.png" height="50px" width="50px" style="margin: 2.85%;">
                </div>
                <h4>Crafting</h4>
                <div id="item-left">
                    <h2>Craftable</h2>
                    <h2>Known By Default</h2>
                    <h2>Time To Craft</h2>
                </div>
                <div id="item-right">
                    <h3>Yes</h3>
                    <h3>No</h3>
                    <h3>180s</h3>
                </div>
            </div>
        </div>
    </body>

＆＃13;

Answer 1

试试这个：

#item-content div {
    background: #f0f0f0;
    height: 100%;
}

这将确保整个项目内容将包含所有内容。

编辑：只需将溢出：隐藏; 添加到＃item-content ，这样就可以解决您的问题：

#item-content {
    background: #f0f0f0;
    padding: 0 4%;
    overflow: hidden;
}

See working fiddle

html css height在包含元素之外重叠

1 个答案: