Question

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

我有一个包含2个或更多子项的父div：其中一个包含位于其他子项之上的用户名，而且只有1个或更多并排div个显示用户拥有的项目。

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

我希望仅允许底部div展开父div，并使标题div使用完整父div的宽度，而不是能够做得更大。

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;

Answer 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

防止特定子div扩展父div

2 个答案: