CSS 防止特定子 div 扩展父 div

Prevent a specific child div from expanding the parent div

提问by Robou

I'm currently developping a website and encountered a problem with CSS.

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

I have a parent divcontaining 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.

我有一个div包含 2 个或更多子项的父项：一个包含位于其他子项之上的用户的姓名，以及div显示用户拥有的项目的1 个或多个并排s 的正下方。

At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.

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

I'd like to only allow the bottom divs to expand the parent divand make the title divuse the full parent div's width without being able to make it larger.

我想只允许底部divs 扩展父级div并使标题div使用父级的完整div宽度而不能使其变大。

I created a fiddle about it: http://jsfiddle.net/mLxjL/2/

我创建了一个关于它的小提琴：http: //jsfiddle.net/mLxjL/2/

HTML:

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:

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;
}

Is it possible to do this without using JavaScript?

是否可以在不使用 JavaScript 的情况下做到这一点？

采纳答案by web-tiki

You can use Absolute positioning

您可以使用绝对定位

FIDDLE

小提琴

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

and on the container div :

并在容器 div 上：

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

回答by Pete

If you add the following styles you should achieve what you want:

如果您添加以下样式，您应该实现您想要的：

.user-match-container {
  position: relative;
  padding-top: 22px;
}

.match-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
}

Example

例子