css - 防止特定子 div 扩展父 div

Question

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

我有一个包含 2 个或更多子项的父级 div:一个包含位于其他子项之上的用户名，并且在 1 个或多个并排 div 下方 显示用户拥有的元素。

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

我只想让底部的 div 扩展父级 div 并使标题 div 使用完整的父级 div 的宽度而无法使其变大。

我为此创建了一个 fiddle :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, 160, 160, 0.70);
    padding: 0 4px;
    float:left;
}
.user-match-container {
    float:left;
}

是否可以在不使用 JavaScript 的情况下执行此操作？

Answer 1

可以使用绝对定位

FIDDLE

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

在容器 div 上:

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