阻止特定的子div扩展父div [英] Prevent a specific child div from expanding the parent div
问题描述
我目前正在开发一个网站,并遇到CSS问题.
我有一个包含两个或多个子代的父代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, 160, 160, 0.70);
padding: 0 4px;
float:left;
}
.user-match-container {
float:left;
}
是否可以在不使用JavaScript的情况下做到这一点?
您可以使用绝对定位
position:absolute;
top:0;
left:0;
width:100%;
以及容器div上:
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
I'm currently developping a website and encountered a problem with CSS.
I have a parent div
containing 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 div
s which display items owned by the user.
At the moment it works fine, but if the user's name (top div
) is larger than the total width of the div
s below, it will expand the parent div
.
I'd like to only allow the bottom div
s to expand the parent div
and make the title div
use the full parent div
's width without being able to make it larger.
I created a fiddle about it: 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;
}
Is it possible to do this without using JavaScript?
You can use Absolute positioning
position:absolute;
top:0;
left:0;
width:100%;
and on the container div :
padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;
这篇关于阻止特定的子div扩展父div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!