CSS：防止特定的子div扩展父div

我正在开发一个网站，并遇到了一个CSS的问题。

我有一个包含2个或更多的孩子的父div：一个表示位于其他孩子顶部的用户的名字，以及低于1个或更多个并排的div，显示用户拥有的项目。

目前它工作正常，但如果用户名(顶部div)大于下面的div的总宽度，它将扩展父div。

我想只允许底部的div扩展父div，并使标题div使用完整的父div的宽度，而不能使它更大。

我创造了一个小提琴：
http://jsfiddle.net/mLxjL/2/

HTML：

<div class="matches">
    <div class="match-container">
        <div class="user-match-container">
            <div class="match-owner user">You</div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
            </div>
        </div> <span class="arrow">→</span> 
        <div class="user-match-container">
            <div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
            <div style="clear:both;"></div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">The Lost Hobo King</div>
            </div>
        </div>
    </div>
</div>

CSS：

.match-container:before,.match-container:after {
    content:"";
    display:table;
}
.match-container:after {
    clear:both;
}
.match-container {
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
    padding:10px;
    margin:10px;
    float:left;
}
.match {
    width:112px;
    float:left;
    margin: 0 2px;
}
.match .image-container {
    width:112px;
    height:130px;
    display:block;
}
.match .item-name {
    line-height:12px;
    font-size:10px;
    margin-top:4px;
    text-align:center;
    height:24px;
    overflow:hidden;
    clear:both;
}
.match-container .arrow {
    float:left;
    position:relative;
    top:70px;
    margin:5px;
}
.match-owner {
    line-height:14px;
    font-size:12px;
    margin-top:4px;
    text-align:center;
    height:14px;
    overflow:hidden;
    margin-bottom:4px;
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
}
.match-owner.user {
    background-color:green;
}
.match-owner.friend {
    background-color:red;
}
.thumbnail-count {
    position:relative;
    top:-24px;
    margin-bottom:-24px;
    font-size:16px;
    font-weight:bold;
    border-top:1px solid white;
    border-right:1px solid white;
    border-top-right-radius: 7px;
    font-size:18px;
    background: rgb(160,160,160) transparent;
    background: rgba(160,0.70);
    padding: 0 4px;
    float:left;
}
.user-match-container {
    float:left;
}

有没有使用JavaScript可以做到这一点？

谢谢 ！

解决方法

您可以使用绝对定位

FIDDLE

position:absolute;
top:0;
left:0;
width:100%;

和容器div：

padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;

原文地址：https://www.jb51.cc/css/219316.html