防止特定子 div 扩展父 div答案

【问题标题】：Prevent a specific child div from expanding the parent div防止特定子 div 扩展父 div
【发布时间】：2014-01-08 11:11:59
【问题描述】：

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

我有一个父 div 包含 2 个或更多孩子：一个包含位于其他孩子之上的用户的名称，并且刚好低于 1 个或多个并排的 divs 显示由用户。

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

我想只允许底部divs 扩展父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, 160, 160, 0.70);
    padding: 0 4px;
    float:left;
}
.user-match-container {
    float:left;
}

不使用 JavaScript 是否可以做到这一点？

【问题讨论】：

您是否尝试过在标题元素上声明max-width？
感谢您的回答，我不想声明最大宽度，因为我希望标题元素的宽度与其下方项目的总宽度相同。
看看使用 "max-width: fit-content;"在你的子元素
Ethan H 发布了一个Answer 说“谢谢@Marisol-Gutierez 你的评论对我有用。我将style="display:inline-block;" 添加到父<div>。我在孩子身上使用了style="max-width:fit-content;" <div>，孩子没有展开父 div。文本行按我的需要换行。"

标签： css

【解决方案1】：

您可以使用绝对定位

FIDDLE

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

在容器 div 上：

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

【讨论】：

高度不一致的内容的解决方案很差

【解决方案2】：

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

.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

【讨论】：